AngularJS Build => Build awesome Web Apps

Saturday, November 15, 2014

All great web app projects start here, download the latest version of ANGULARJS here, or grab it from the cdn

In the index page reference the ANGULARJS script, ng-app directive defines the element in which ANGULARJS will bootstrap itself, ng-init directive defines the initialization task, a model called name with a value is created, double curly braces are used to output the data stored in models, they can also be used for expressions, to perform a calculation for example

Create a controller using scope, define the model on the scope, scope is an ANGULARJS object that is able to reference the JAVASCRIPT object model as a property

Here we make use of the ng-repeat directive to display a list of items from the collection, ng-repeat duplicates the DOM element and binds the defined property of the data object

View the result on the web page

Add a link to an external stylesheet and these CSS classes

Here are the CSS styles

View the restyled app in the browser

Let's sort the names alphabetically using the built in filter orderby, in the ng-repeat following the pipe operator

The add a hero form has three inputs, the texboxes are bound to a model object newhero, the button has ng-click directive that will invoke save function on scope in the controller

The scope save function captures the values from inputs and pushes them into the superheroes model, the new addition immeditaly gets added to the collection, this is two way data binding

Create and add a hero, click save view the superhero immediately is added to the intro section

Add a new button to hide the button and show the form use ng-hide and ng-show directives, if the evaluate to true the element is shown or hidden from the DOM, the new button invokes showform function on scope in the controller

In the showform function set the visibility to true, in the save function set the forms visibility to false

Refresh web page, click add superhero button

The form is shown and button hidden, create a hero, click save

The form is hidden, button shown and new hero appears immediately in the collection

Head over to node.js website and install the right version of node for your operating system, this will also install npm, the node package manager

In the terminal window check the versions of node and npm, that they have been installed correctly

Install the expressjs module for node.js

Create an expressjs app like this, this will be our web server

Change into my-web-server directory to install expressjs with all dependencies and run npm install in the terminal

Now type npm start to start the web server

In the browsers address bar type http://localhost:3000 and view the expressjs welcome message

Copy the index.html, app.css and angular.js files into the public folder located within my-web-server, In the browser enter http://localhost:3000/index.html the files are now being served from the web server

Install yeoman

Install the ANGULARJS generator

Create the project directory and skeleton for the project, name the project wizz

Download and install all the dependencies listed in the package.json file with npm install

Yeoman comes with its own web server, run the command grunt serve from the terminal window

This will open up a new browser window and show the default welcome screen

Let's create a quick, clickable prototype: sports life, it will consist of four pages, homepage, articles, gallery and users, create the scaffolding for the app using these instructions

Press y to include twitter bootstrap

Install UI-Bootstrap using bower

Include the JAVASCRIPT file in the index file

Add the angular bootstrap dependency to the ANGULAR app

Create the navigation bar with this code

Start the web server using the following command

View the navigation bar at the top of the page

In main.js file replace awesomethings model with this code, to use placeholder images for a rapid prototype, lorempixel dot com provides images with many dimensions and categories

Default Success Warning Important Info Inverse
B S W I ? O