Tags: Ulbora CMS, Java CMS, REST service, JSON REST, REST web services
Tag-based navigation is supported by all major search engines Building Clean Client Code One of the best ways to improve SEO is to create a clean and efficient AngularJS application Unnecessary JavaScript should always be avoided JavaScript methods should execute quickly, with no unnecessary processes running in the background Search engines take page speed into consideration when ranking sites Pages that con‐ tain long-running JavaScript functions may get dropped by Google and other search engines and not get indexed Once a page gets dropped by a search engine, it can take a long time to get that page indexed again Adding a Sitemap | 183 Building Fast REST Services One last thing that can directly affect page speed and SEO is the speed of the REST web services used to populate page content Pages that rely on slow REST services can suffer as a result REST services should return results in two seconds or less Services that return results in under a second are best for SEO and site performance Although REST service design is beyond the scope of this particular book, I want to emphasize how important web service design is to SEO when web pages rely on those services for content When your site depends on REST services, always make sure those services perform well and add no unnecessary delay to your site or application Always insist on peak-performing services Conclusion That brings us to the end of this chapter and the end of the book I’ve done my best to present AngularJS in a way that will make it easy to understand for both beginners and experienced developers alike The concept of using JavaScript client-side frame‐ works to build complete frontend applications and websites is relatively new, and often referred to as “cutting edge” by many The recent Google announcement related to JavaScript and SEO mentioned earlier attests to that But things that are considered cutting edge today will be commonplace in a few years I believe AngularJS will be at the forefront of application development in coming years, and is well worth the time spent learning the framework This book is only a starting point, however Now you must go out and develop great applications with AngularJS, and have fun building those applications too! Remember, the best Angu‐ larJS application is a well-designed AngularJS application Always build the best applications that you possibly can It’s worth the effort in the end 184 | Chapter 12: AngularJS and SEO References • AngularJS • Bootstrap • jQuery • Wikipedia entry for MVC • Wikipedia entry for REST • Wikipedia entry for Web service • Ulbora CMS • Ulbora CMS at SourceForge • Wikipedia entry for SPA • Wikipedia entry for RWD 185 Index Symbols $location service, 139 $rootScope object, 89 $scope object, adding behavior to, 39 attaching methods to, 139 models in, 89 element (HTML), 164 {{}} (double curly braces), A Active Server Pages (ASP), 23 Ajax REST services and, 78 sites, AngularJS as client-side framework, as MVC framework, 27 bootstrapping with, business logic in, controllers, dependency injection, directives, 121-135 downloading files for, 11 HTML compiler, 121 HTML5 and, integrating with other frameworks, model classes, routes, search engines and, SEO for, 181-184 services, non-REST, 104 single-page applications in, templates, testing, view classes in, Apache Cordova, 179 applications adding service modules to, 94 running in IDEs, 15, 69 running with models, 97 testing in IDEs, 15-21 transportable, 159 using REST services in, 92 ASP.NET framework, authentication, 103-108 B Basic Authentication, 104, 163 bootstrapping, HTML code and, 13 business logic, 103-119 adding to projects, 108-111 controller, 41 in controllers, REST services and, 77 user authentication, 103-108 using, 110 C CakePHP framework, 24 integrating with AngularJS, callback functions, 82 cascading style sheets, 65 Chrome Developer Tools, 97 client code, 183 client-side frameworks, integrating AngularJS with, 187 model classes, view classes in, client-side security, 137 cloud deployment, 178 making apps transportable, 159 continuous integration (CI), end-to-end testing and, 87 controller as, 42 controllers, 7, 37-54 behavior, adding with, 39-41 business logic in, 8, 41 editing JavaScript code for, 13 end-to-end testing of, 52-54 form data, using, 43 form submissions and, 41-43 initializing models with, 39 JS Test Driver and, 44-49 Karma, testing with, 49-52 login, adding, 138 logout, 141-143 MEAN, 160-164 models and, 90, 94-96 multiple, for single elements, 42 presentation logic and, 41 projects, adding to, 57 Protractor, testing with, 52-54 REST services and, 82 security modifications for, 140 templates and, cookies, 104 checking, 105 deleting, 106 holding user credentials in, 105 retrieving information from, 107 Cross-Origin Resource Sharing (CORS) layer, 138 CSS3 media queries in, 143 styling pages with, 62 services module and, 80 deployment, 157-180 cloud, 178 local, 157-178 directives, 121-135 adding to projects, 124-128 building presentation logic with, 65 custom, building, 122 defined, 121 end-to-end testing of, 133 Karma and, 128-133 naming conventions for, 123 ng-click, 40, 41 ng-include, 122 ng-model, 40, 41, 55 ng-repeat, 65, 84 ng-submit, 42, 143, 165 ng-view, 55 passing title attribute, 127 Protractor and, 133 restrict option, 123 template attributes for, 124 templateUrl attribute, 124 unit testing for, 128-133 views and, 65 D factory function, 78, 105 failed REST service calls, 83 Firefox, 51 forms, 41-44 data, using, 43 submissions from, 41-43 frameworks ASP.NET, CakePHP, 9, 24 client-side, 1, 7, data formatting with controllers, 41, 62 mock, adding to projects, 61 storage, REST services and, 77 dates, formatting, 62, 65 dependency injection (DI), npm install command and, 168 OpenShift and, 179 188 | Index E end-to-end testing (E2E), 9, 20 business logic, 117 MEAN stack deployment, 176-178 models, 100 non-REST services, 117 of directives, 133 of security, 153 REST services, 87 ExpressJS, 159 building REST services with, 27 F Jasmine, 48 MVC, 7, 23-36 server-side web MVC, Spring MVC, 1, 4, 9, 23, 27 Struts, 1, 23 web, 23-27 web MVC, Zend, 23 G Git, 155, 178 Google, 182 Google Chrome, 51 Google Webmaster Tools, 182 H hashbang mode, 5, HTML compiler, 121 HTML5, editing, 13 History API, mobile applications for, 179 mode, turning off, modifying to use models, 93 HTTP methods, 78 HTTPS, 138 JS Test Driver, 9, 44-49 test scripts, creating, 46 testing with, 49 JSON, REST response objects as, 83 JsTestRunner, 17 K Karma, 9, 19 business logic and, 111-117 configuring, 50, 71 configuring for MEAN stack deployment, 170 directives and, 128-133 installing, 49 MEAN stack deployment, testing, 169-176 models, testing, 97-100 non-REST services and, 111-117 REST services, testing with, 85-87 security, testing with, 148-153 service specifications for, 86 testing considerations for, 29 unit tests, running, 51 karma-ng-html2js-preprocessor Karma plugin, 128 L IDE, 11-21 HTML, editing, 13 JavaScript, editing, 13 NetBeans, 11 running applications in, 15 templates, creating, 14 testing applications in, 15-17 input elements (from forms), 43 list services, 83 lists, returning, 83 locationProvider service, login services, 138 controllers and, 138 login controllers and, 139 non-REST, 138 security, 139, 143 templates, 143 user authentication, 138, 143 J M I Jasmine framework, 48 Java, 181 Java Server Pages (JSP), 23 JavaScript console, accessing, 38 editing, 13 Jenkins CI system, 21 testing and, 29 JQuery, downloading, 11 MEAN (MongoDB, ExpressJS, AngularJS, and Node.js) stack deployment, 157-180 changing service URL for, 159 cloud deployment, 178 controllers, 160-164 end-to-end testing of, 176-178 Karma and, 169-176 mobile apps, 179 Node.js dependencies, adding, 168 Protractor and, 176-178 Index | 189 running locally, 169 services, 159 templates, 164 unit testing, 169-176 microformat tags, 183 mobile apps as wrapper for server-side application, 25 converting web applications to, 26 devices, designing for, 29-35 MEAN stack deployments for, 179 responsive design and, 29-35 web MVC frameworks and, 24 models, 7, 89-101 adding to app, 94 controllers and, 7, 90, 94-96 end-to-end testing, 100 initializing with controllers, 39 Karma, testing with, 97-100 properties of, 91 Protractor, testing with, 100 REST services as source of, 89 scope properties and, 91 unit testing, 97-100 MongoDB, 158 interacting with, 159 Mongoose.js ODM library, 159 MVC frameworks, 23-36 AngularJS as, 27 controllers, model classes, responsive design and, 29-35 testing considerations for, 28 view classes, web, 23-27 N NetBeans configuring, 11 installing, 11 JS Test Driver, 44-49 JsTestRunner support in, 17 Karma and, 171 Node.js plugin, installing, 158 Protractor and, 15 ng-app tag, ng-click directive, 40, 41 ng-include directive, 122 ng-model directive, 40, 41, 55 ng-repeat directive, 84 190 | Index ng-submit directive, 42, 165 user authentication and, 143 ng-view directive, 55 dynamic content and, 56 single-page applications in, 2, ngRoute module, Node.js, 158 dependencies, adding, 168 Karma and, 15 Protractor and, 15 NoSQL, 159 injection attack, 138 npm (Node.js package manager), 158 npm install command, 168 O OpenShift, 178 P package.json file, 15 performance and SEO, 183 PHP, 23, 181 presentation logic adding to projects, 64 controllers and, 41, 62 directives and, 65 projects, 55-75 application, running, 69 controllers, adding, 57 creating, 55 directives, adding, 124-128 end-to-end testing, 73 functionality, adding, 65-69 Karma, testing with, 70-74 menus, adding, 60 mock data, adding, 61 non-REST services, adding, 108-111 presentation logic, adding, 64 Protractor, testing with, 73 REST services, updating for, 80 service modules, adding, 94 styles, adding to, 64 styling pages in, 62 templates, adding, 58 testing, 70-73 Twitter Bootstrap, adding, 58 unit testing, 70-73 Protractor, 10, 20 business logic and, 117 configuring, 52 directives and, 133 installing, 52 MEAN stack deployment and, 169-176 models, testing with, 100 non-REST services and, 117 REST services, testing with, 87 running, 53 security and, 153 Selenium Server and, 53 test server, starting, 178 test specifications, creating, 52, 73 testing considerations for, 29 testing with, 74 provider function, 78, 104 public SSH keys, 178 Python, 181 R responsive design, 29-35 HTML5 mobile applications and, 179 REST services, 77-88 AngularJS and, 78 as objects, 80 authenticating across multiple, 103 Chrome Developer Tools and, 97 communicating with, 79 controllers and, 82 creating AngularJS services, 78 end-to-end testing of, 87 failed calls, 83 JavaScript debuggers and, 38 Karma, testing with, 85-87, 99 lists, displaying with, 83 lists, returning, 83 Protractor, testing with, 87 response objects from, 83 response times for, 41, 184 SEO and, 184 testing specifications for, 86 troubleshooting, 97 unit tests and, 95 restrict option (directives), 123 routes, adding, for security, 145 templates and, Ruby, 181 Ruby on Rails, 24 S scope properties, 91 displaying, error handling with, 140 passing values to, 124 search engine optimization (SEO), 181-184 client code and, 183 Google Webmaster Tools, 182 microformat tags, 183 performance and, 183 REST services and, 184 sitemaps, 183 tag-based navigation, 183 search engines, security, 137-155 end-to-end testing for, 153 Karma, testing with, 148-153 login controllers, 139 login template, 143 logout controllers and, 141-143 logout link and, 146 modifications of controllers, 140 non-REST services and, 103 Protractor and, 153 routes, adding, 145 unit testing, 148-153 user authentication and, 138 Selenium Server, 53 running, 20 SEO companies, 182 server-side web MVC frameworks, service function, 78, 104 services module, 80 modifying to make apps transportable, 159 services, non-REST, 103-119 checking data with, 105 cookies, reading with, 107 creating, 104 deleting data with, 106 holding data with, 105 login, 138 MEAN, 159 user authentication, 103-108 single-page applications, sitemaps, 183 Spring MVC framework, 1, 4, 23 building REST services with, 27 integrating with AngularJS, SSL, 137 Index | 191 Struts framework, 1, 23 styles adding to projects, 64 Bootstrap and, 65 success callback function, 82, 94 T tag-based navigation, 183 templates, creating, 14 login, 143 MEAN, 164 projects, adding to, 58 views as, 55 templateUrl attribute (directives), 124 test scripts, creating, 46 test specifications, 28 testing, cloud deployments, 179 considerations for MVC, 28 end-to-end, 20 in IDE, 15-21 Karma, 19 library files, location of, 17 Protractor, 20 unit, 19 with JS Test Driver, 49 with JsTestRunner, 17 Torvalds, Linus, 155 Travis CI system, 21 testing and, 29 Twitter Bootstrap, 1, 55, 58 downloading, 11 menus, adding, 60 U unit testing, 9, 19 asynchronous calls, 95 business logic, 111-117 directives, 128-133 MEAN stack deployment, 169-176 models, 97-100 192 | Index non-REST services, 111-117 REST services, 95 security, testing, 148-153 with JS Test Driver, 44-49 user authentication, 103-108 basic, 104 login controllers, 139 login services, 138 login template, 143 logout controllers and, 141-143 logout link, 146 security and, 138 testing with Karma, 112-117 unit testing, 112-117 user credentials checking, 105 deleting, 106 holding, 105 retrieving, 107 V V8 JavaScript engine (Google), 159 views as templates, 55 controllers and, directives and, 65 testing with Karma, 70-73 W web applications converting to mobile, 26 wrappers for, 25 web browsers, security and, 138 web frameworks, 23-27 web MVC frameworks, webdriver-manager tool, 53 WebDriverJS, 20 WebView component (Android), 25 Z Zend Framework, 23 About the Author Ken Williamson is a software engineer and architect with over twenty years of expe‐ rience in the technology industry Ken’s first programming language was Assembly using the 6502 chip He moved on to C and C++ and eventually to Java and Java‐ Script Ken has designed and written mobile, desktop, and server software for some of the biggest companies in the world Ken holds a BS in Computer Science from Kennesaw State University He is the founder of several open source projects including Ulbora CMS; he has also contrib‐ uted to many other open source projects over the years Ken makes his home in Atlanta, Georgia with his wife, Sherry You can find Ken at www.ken-williamson.com Colophon The animals on the cover of Learning AngularJS are Florida cricket frogs (Acris gryl‐ lus dorsalis), which are subspecies of the Southern cricket frog They can be found all throughout Florida, with the exception of the extreme northwestern panhandle Cricket frogs prefer a freshwater environment, such as puddles, lakes, marshes, and streams They are easily recognized by the triangular mark on their heads and the two dark stripes on their rear Breeding occurs from April into the fall, with small clusters of eggs attached to sub‐ merged plants Males advertise their readiness with a loud, rapid call of gick, gick, gick, which has been described by some as the sound of marbles clicking together Adult Florida cricket frogs grow to be about 1.25 inches long, and vary in color from dark brown to tan or green They enjoy healthy population growth and are not con‐ sidered threatened in any way Many of the animals on O’Reilly covers are endangered; all of them are important to the world To learn more about how you can help, go to animals.oreilly.com The cover image is from Lydekker’s Royal Natural History The cover fonts are URW Typewriter and Guardian Sans The text font is Adobe Minion Pro; the heading font is Adobe Myriad Condensed; and the code font is Dalton Maag’s Ubuntu Mono ... case This practical guide provides a hands-on approach to learning AngularJS that will have you building high-quality applications and websites in no time Learning AngularJS A GUIDE TO ANGULARJS. .. Diagram of an AngularJS MVC application Single-Page Applications AngularJS is most often used to build applications that conform to the single-page application (SPA) concept SPAs are applications... development team Dependency injection also helps to make an application more testable That is one of the main advantages of using AngularJS to build JavaScript applications AngularJS applications are much