Angular.js is used to create dynamic websites. We will be building an Angular application with the Bootstrap framework. An Angular Bootstrap Website.
Building an Angular front-end application is relatively simple.
Angular helps organise javascript. Angular helps create fast websites.
This first example shows a webpage with the Bootstrap link in the head section and the Angular link at the end of the body section.

See the Pen AngularFront-endApplication1 by Daniel (@Parsons) on CodePen.

Modules in Angular are where pieces of of an Angular application are written.
Modules in Angular is makes code easy to test, easy to maintain and easy to read.
In the codepen below we create our first module.

  1. ‘app’ is the application
  2. ‘angular’ to use the AngularJS library.
  3. ‘module’ to create a new module.
  4. ‘store’ is the application name.
  5. The ‘[]’ empty array will be where the dependencies are defined. There are no dependencies yet however the empty array is required.

See the Pen AngularBootstrapWebsite by Daniel (@Parsons) on CodePen.

On line 1 an attribute is added to the html tag. The controller ‘ng=app=’store’ is added. This controller runs this module (‘store’) when the document loads.
Also added to the application is an Expression. In Angular expressions allows the insertion of dynamic values into HTML. Here we add a string expression to the ‘h1’ heading tag.

Now we can start working with data. We will create a simple json object to print to the page. The object will be a ‘drink’ object with three name/value pairs.

Wrapping javascript in a closure is a good habit to get into. First we wrap our ‘app’ inside a closure.

Controllers in Angular are where the application behaviour is defined by functions and values.
The ‘StoreController’ is now attached to the ‘app’. The second parameter is an anonymous function which will contain the code to execute when the ‘StoreController’ is called.

Below the ‘StoreController’ we place the ‘drink’ json object.

Now we set the ‘drink’ object equal to a property of this controller. On line 4 we set a ‘product’ property and attach it to this controller and give it a value of ‘drink’.

Now we can display the ‘drink’ object in the html.
First of all we need a ‘div’ element with a controller attribute.

  • ‘ng-controller’ is the Directive.
  • ‘StoreController’ is the Controller name.
  • ‘store’ is an Alias

Inside the ‘div’ we will add three elements to display the name, price and description of the drink. Inside each element we add an expression that will display the values.

See the Pen AngularBootstrapWebsite2 by Daniel (@Parsons) on CodePen.

There it is a first Angular application built in the bootstrap framework.

Angular logo.

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *