Angular, Part 2: Getting started with Angular
In Angular, Part 1, I shared why Angular is my go-to front-end development framework. Now here’s how to get started.
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.
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
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.
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
.whenstatement contains the URL to watch for, and the view and controller to render when a user navigates to that URL.
The next parts to look for are the views and controllers. The views are located app/views. To create a new view, use the command
yo angular:view <name of your view>. This will create a .html file in app/views with the specified name.
The controllers are located in app/controllers. To create a new controller, use
yo angular:controller <name of controller>. This will create a basic controller in app/controllers with the specified name.
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.