AngularJS: Difference between revisions

From Wiki
Jump to navigation Jump to search
Created page with "Good tutorial here: http://www.w3schools.com/angular/"
 
 
(22 intermediate revisions by the same user not shown)
Line 1: Line 1:
Good tutorial here: http://www.w3schools.com/angular/
Good tutorials:
* https://angularjs.org/
* http://www.w3schools.com/angular/
 
== Example ==
<source lang="html4strict">
<!DOCTYPE html>
<html ng-app="exampleApp" >
<head>
    <title>AngularJS Demo</title>
    <link href="bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-theme.css" rel="stylesheet" />
    <script src="angular.js"></script>
    <script>
        var myApp = angular.module("exampleApp", []);
        myApp.controller("dayCtrl", function ($scope) {
            // controller statements will go here
        });
    </script>
</head>
<body>
    <div class="panel" ng-controller="dayCtrl">
        <div class="page-header">
            <h3>AngularJS App</h3>
        </div>
        <h4>Today is {{day || "(unknown)"}}</h4>
    </div>
</body>
</html>
</source>
 
== Utility methods ==
<source lang="javascript">
angular.isNumber(o);
angular.isString(o);
angular.isArray(o);
angular.isObject(o);
angular.lowercase(o);
angular.uppercase(o);
angular.extend(obj1, obj2);  // add properties of obj2 to obj1
for (var prop in myData) {
    console.log("Name: " + prop + " Value: " + myData[prop]);
}
angular.forEach(myData, function (value, key) {
    console.log("Name: " + key + " Value: " + value);
});
</source>
 
== Modules ==
<source lang="javascript">
var myApp = angular.module("myApp", []);    // create the app
var myApp = angular.module("myApp");        // gives an error if the app hasn't been created
myApp.name;                                // "myApp"
myApp.constant(key, value);                // define a constant
myApp.value(key, value);                    // define a service that returns a constant
myApp.controller(name, constructor);        // create a controller
myApp.service(name, constructor);          // create a service
myApp.factory(name, provider);              // create a service
myApp.provider(name, type);                // create a service
myApp.config(callback);                    // register a function to configure a model after loading
myApp.run(callback);                        // register a function to run after load and configure
myApp.animation(name, factory);            // create animations
myApp.directive(name, factory);            // create a directive to extend HTML
myApp.filter(name, factory);                // create a filter
</source>
 
== Controllers ==
<source lang="javascript">
myApp.controller("dayCtrl", function($scope){  // inject the dependency on $scope
    $scope.day = "Thursday";
})
.controller("tomorrowCtrl", function($scope){  // fluent api allows chaining
    $scope.day = "Friday";
});
</source>
In the view:
<source lang="html4strict">
<div ng-controller="dayCtrl">
    <h4>Today is {{day}}</h4>
</div>
<div ng-controller="tomorrowCtrl">
    <h4>Tomorrow is {{day}}</h4>
</div>
</source>
 
== Directives ==
<source lang="javascript">
myApp.directive("highlight", function () {        // factory function
    return function (scope, element, attrs) {      // returns a worker function
        if (scope.day == attrs["highlight"]) {
            element.css("color", "red");
        }
    }
});
</source>
In the view:
<source lang="html4strict">
<h4 ng-controller="dayCtrl" highlight="Monday">
    Today is {{day}}
</h4>
</source>
 
== Filters ==
<source lang="html4strict">
<p>{{ name | uppercase }}</p>
<p>{{ price | currency }}</p>
<p>{{ pubdate | date }}</p>
</source>

Latest revision as of 18:24, 11 June 2015

Good tutorials:

Example

<!DOCTYPE html>
<html ng-app="exampleApp" >
<head>
    <title>AngularJS Demo</title>
    <link href="bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-theme.css" rel="stylesheet" />
    <script src="angular.js"></script>
    <script>
 
        var myApp = angular.module("exampleApp", []);
 
        myApp.controller("dayCtrl", function ($scope) {
            // controller statements will go here
        });
 
    </script>
</head>
<body>
    <div class="panel" ng-controller="dayCtrl">
        <div class="page-header">
            <h3>AngularJS App</h3>
        </div>
        <h4>Today is {{day || "(unknown)"}}</h4>
    </div>
</body>
</html>

Utility methods

angular.isNumber(o);
angular.isString(o);
angular.isArray(o);
angular.isObject(o);
angular.lowercase(o);
angular.uppercase(o);
angular.extend(obj1, obj2);  // add properties of obj2 to obj1
for (var prop in myData) {
    console.log("Name: " + prop + " Value: " + myData[prop]);
}
angular.forEach(myData, function (value, key) {
    console.log("Name: " + key + " Value: " + value);
});

Modules

var myApp = angular.module("myApp", []);    // create the app
var myApp = angular.module("myApp");        // gives an error if the app hasn't been created
myApp.name;                                 // "myApp"
myApp.constant(key, value);                 // define a constant
myApp.value(key, value);                    // define a service that returns a constant
myApp.controller(name, constructor);        // create a controller
myApp.service(name, constructor);           // create a service
myApp.factory(name, provider);              // create a service
myApp.provider(name, type);                 // create a service
myApp.config(callback);                     // register a function to configure a model after loading
myApp.run(callback);                        // register a function to run after load and configure
myApp.animation(name, factory);             // create animations
myApp.directive(name, factory);             // create a directive to extend HTML
myApp.filter(name, factory);                // create a filter

Controllers

myApp.controller("dayCtrl", function($scope){   // inject the dependency on $scope
    $scope.day = "Thursday";
})
.controller("tomorrowCtrl", function($scope){   // fluent api allows chaining
    $scope.day = "Friday";
});

In the view: 

<div ng-controller="dayCtrl">
    <h4>Today is {{day}}</h4>
</div>
<div ng-controller="tomorrowCtrl">
    <h4>Tomorrow is {{day}}</h4>
</div>

Directives

myApp.directive("highlight", function () {         // factory function
    return function (scope, element, attrs) {      // returns a worker function
        if (scope.day == attrs["highlight"]) {
            element.css("color", "red");
        }
    }
});

In the view: 

<h4 ng-controller="dayCtrl" highlight="Monday">
    Today is {{day}}
</h4>

Filters

<p>{{ name | uppercase }}</p>
<p>{{ price | currency }}</p>
<p>{{ pubdate | date }}</p>
Retrieved from "https://wiki.scott5.org/index.php?title=AngularJS&oldid=1602"