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