The easiest way to get started with Angular is to use a Yeoman generator. Here’s the code and documentation for the Angular generator.
While I usually don’t recommend using generators, it is a good way to see how the moving pieces of Angular interact without having to worry about the file structure or naming conventions of the app. If you don’t have npm and node installed, you can find instructions for your operating system on their website.
Step One
Install Yeoman and the Angular generator globally, along with Bower and the Grunt CLI, which are used for front-end dependencies and build tools, respectively:
npm install -g yo generator-angular bower grunt-cli
Step Two
Create and change into an empty directory. Run yo angular, which will ask you a series of questions. When first starting out I would answer “no” to using Sass/Compass, unless you already have it installed and have used it before. Answer “no” to the bootstrap, primarily because Angular already adds a lot of classes and HTML bits; having the bootstrap classes in there as well will make it more difficult to learn. The last question asks what other angular parts should be installed; get rid of everything except routes.
The Angular App
The generator will then create a full working Angular app. To run the app, use the command grunt serve which will build all of the assets, start the app, and, if possible, will open the index page in your browser.
Moving Parts
There are three major moving parts to pay attention to in this generated app. ’
-
The app, located in app/scripts/app.js.
This file contains the base level app and the routing information using$routeProvider. Each.whenstatement contains the URL to watch for, and the view and controller to render when a user navigates to that URL. -
Views
The next parts to look for are the views and controllers. The views are located app/views. To create a new view, use the commandyo angular:view <name of your view>. This will create a .html file in app/views with the specified name. -
Controllers
The controllers are located in app/controllers. To create a new controller, useyo angular:controller <name of controller>. This will create a basic controller in app/controllers with the specified name.
These are the three minimum pieces needed to create a single-page web application—a router, some views, and some controllers. Angular doesn’t have a specific model construct, as it just uses plain old JavaScript objects.
Features
Beyond these basics, Angular has a host of features designed to increase the modularity and reusability of your code.
The most important of these features includes filters for transforming data or information in views (such as displaying 5.2 as $5.20). There are services for performing tasks across controllers, views, and any other place that needs some reusable code.
Lastly, there are directives, which allow programmers to write portable code that interacts directly with the DOM. Documentation on each of these mentioned pieces of code can be found at Angular’s website; plus, there are Yeoman generators for each.
While this doesn’t include building a full web application on Angular, it will get you started so that you can jump in and get familiar with the framework. Part 3 will be on how to find more information about Angular and how to stay up to date on the latest Angular trends and developments.
