##Creating an App using Angular
-
In your HTML, always prefix angular element attributes with
ng-*
(ex. an angular-stylehref
is calledng-href
) -
These
ng-*
attributes are calleddirectives
, and they allow us to add behavior to HTML. Directive HTML tags tell Angular to run or reference Angular code -
Important directives to remember:
ng-app
turns ordinary HTML into an Angular application. You will need Angular loaded into your project (via a package manager or CDN) for this to workng-controller
connects a controller (a JavaScript file containing logic) to a section of our application.ng-model
ties together (binds) values in HTML and data in the controller.ng-repeat
iterates over a collection and can display a chunk of html once for each element in the collection
-
Blocks of code within
{{}}
are calledexpressions
. You can put working JavaScript inside of an expression
##Steps to Create Your App:
Step 1. Inform your index.html
that it's supposed to use Angular by placing the ng-app
directive equal to the app name in your html tag:
example:
<html lang="en" ng-app="appName">
Step 2. Define your controllers in app.js
. Most applications will have several controllers. Each controller controls a different part of the application.
example:
angular
.module('appName',[])
.controller('appController', appController);
function AlbumsIndexController() {
var vm = this;
vm.thing = {};
vm.func = function(){};
// more logic here
}
To use your controllers in the View declare them in index.html
:
example:
<div ng-controller="AlbumsIndexController as albumsIndexCtrl">
<!--placeholder for now-->
</div>
Note: using this as
syntax, specifies an abbreviated name, albumsIndexCtrl
, for referring to the controller in the HTML.
Step 3. To use an input element to create a piece of accessible data, use ng-model
in your index.html
.
example:
<div ng-controller="SampleCtrl">
<span>Enter your name:</span>
<input type="text" ng-model="myName">
<h1>{{ myName }}</h1>
</div>
##Setting up CRUD methods with Angular:
Step 1. To run Angular's $http
service, which is similar to JQuery's $.Ajax
, first tell Angular that we'd like to have it available by injecting it. To do this, we include one extra line with the controller function definition.