Angularjs-基础教程

一些angualr的基础概念，适合入门。

1.下载

2.简单介绍使用

1.ng-app

决定了angularjs的作用域范围，你可以如下使用

//让angularjs渲染整个页面

<html ng-app>

...

</html> 

//让angular只作用于某div,渲染页面的一部分

<div ng-app='myapp'>

...

</div>

2.ng-model

模型和视图的双向数据绑定. ng-model 称为指令 {{test}} 插值表达式,实际上也是一个指令

譬如<input type="text" ng-model='test' /> <p>{{test}}</p> ,当你在文本框输入时，数据模型被改变，{{test}}的值跟着改变。

<!doctype html>

<html>

  <head>

    <script src="angular.min.js" type="text/javascript"></script>

  </head>

  <body ng-app>

  <input ng-model='test' >

  <p>{{test}}</p>

  </body>

</html>

3.angular.module

语法：angular.module(moduleName, [requires], [configFn]); 用于创建、获取模块。

var app = angular.module(name, [requires], [configFn]);

//name       创建或获取的模块名

//requires   依赖的模块数组，['ngRoute','ngAnim',..]

//configFn   配置函数，同module.config

4.controller

控制器和作用域对象是一一对应的，控制器内定义为作用域初始化数据和方法

mycontroller = mymodule.controller('name', Constructor); //传入控制器名 和 控制器构造函数

<!doctype html>

<html>

  <head>

    <script src="angular.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    var app = angular.module('myapp',[]);

    app.controller('TestCtrl',function($scope){

      $scope.test="hello word";

    });

    </script>

  </head>

  <body ng-app='myapp' ng-controller='TestCtrl' >

  <input ng-model='test'>{{test}}

  </body>

</html>

5.value

value方法是定义服务的方式之一，类似 constant,factory,service

//name是service的名称，object是值,

mymodule.value(name, object); // 其实就是配置模块内的变量和它的值

<!doctype html>

<html>

  <head>

    <script src="angular.min.js" type="text/javascript"></script>

  </head>

  <body ng-app='myapp' ng-controller='mytest' >

  <input ng-model='test'>{{test}}

    <script type="text/javascript">

    var app = angular.module('myapp',[]);

    app.value('testvalue','word');

    //使用value方法定义的服务

    app.controller('mytest',function($scope,testvalue){

      $scope.test="hello "+ testvalue;

    });

    </script>

  </body>

</html>

5.factory

语法 mymodule.factory(serciceName, providerFn); 调用工厂函数providerFn，返回的对象即为对应的服务。

<!doctype html>

<html>

  <head>

    <script src="angular.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    var app = angular.module('myapp',[])

      .value('user','sindy')

      .factory('greetSvc',function(user){

        return{

          greeting:function(){

            return "this can output : hello "+ user;

          }

        }

      });

    app.controller('mytest',function($scope,user,greetSvc){

      $scope.test = "hello "+ user;

      $scope.output = greetSvc.greeting();

    });

    </script>

  </head>

  <body ng-app='myapp' ng-controller='mytest' >

  <input ng-model='test'>{{test}}

  </p>

    {{output}}

  </body>

</html>

6.provider

语法： mymodule.provider(serviceName, providerFn); 实际上通过 new providerFn().$get()，来获得对应的服务, 跟 service方式定义服务的原理比较类似。

<!doctype html>

<html>

  <head>

    <script src="angular.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    var app = angular.module('myapp',[])

      .value('testvalue','sindy')

      .provider('testprovider',

        function(){

          this.lable = "this will output : hello sindy";

          this.$get = function () {

             return this;

           }

        }

      );

    app.controller('mytest',function($scope,testvalue,testprovider){

      $scope.test = "hello "+ testvalue;

      $scope.output = testprovider.lable;

    });

    </script>

  </head>

  <body ng-app='myapp' ng-controller='mytest' >

  <input ng-model='test'>{{test}}

  </p>

    {{output}}

  </body>

</html>

7.service

语法： mymodule.service(serviceName, constructor); , 实际上通过 new constructor() 来获得对应的服务。

var app = angular.module('myapp',[])

  .value('testvalue','sindy')

  .service('testservice',

    function(testvalue){

      this.lable = function(){

        return "this will output:hello "+testvalue;

      }

    }

  );

app.controller('mytest',function($scope,testvalue,testservice){

  $scope.test = "hello "+ testvalue;

  $scope.output = testservice.lable();

});

8.constant

语法：mymodule.constant(serviceName, object); 模块内定义常量

var app = angular.module('myapp',[])

  .value('user','sindy')

  .constant('country','china')

  .service('greetSvc',

    function(user, country){

      this.hello = function(){

        return "hello everyone, I am " + user + ", come from " + country;

      };

    }

  );

app.controller('myctrl',function($scope,user,greetSvc){

  $scope.test = "hello "+ user;

  $scope.output = greetSvc.hello();

});

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>angular定义服务的方式</title>

    <script type="text/javascript" src="js/angular.min.js"></script>

    <style type="text/css">

        body{font-size:20px;}

        .dashed{border-bottom:1px dashed #555; padding:20px;}

        p{line-height:2;}

        input[type="text"]{padding:5px; /*height:30px;*/ line-height:30px; min-width:300px; font-size:20px; font-weight:thin;}

        h1{border-top:1px solid hotpink;}

    </style>

</head>

<body ng-app="myapp">

    <script type="text/javascript">

        // angular.module(modulename,requires,[configFn]);

        //注意： Array: requires参数是必须的

        mymodule = angular.module('myapp',[]);

        // mymodule.controller(name, constructor);

        mymodule.controller('myctrl', function($scope){ //内置对象 带$前缀

            $scope.test = "hello angularjs!";

        });

        // 配置模块中可用的变量 指定它的值，变量可以注入各个controller中

        //mymodule.value(name,obj)

        mymodule.value('myname', 'alice');

        // 以注入方式使用模块定义的变量

        mymodule.controller('myctrl2', function($scope, myname){//注入模块定义的变量

            $scope.username = myname + ', sindy';

        });

        // 创建服务 providerFn执行的结果 赋值给声明的模块变量name

        // mymodule.factory(name, providerFn)

        mymodule.factory('mysvc', function(myname){//注入模块定义的变量

            return {

                hi: function(){

                    return "hi, nice to meet you! i'm " + myname;

                }

            };

        });

        // 使用服务 注入方式

        mymodule.controller('myctrl3', function($scope, myname, mysvc){

            $scope.username = myname;

            $scope.greeting = mysvc.hi();

        });

        // 其实value, factory, provider都是创建模块内的变量和方法

        // value, factory返回的是值 (各种类型 string, obj, fn);  provider是构造函数，在被注入使用时会自动new providerFn().$get()

        // 所以 value, factory, provider的作用都是定义模块内的数据和方法， 以便被内部的控制器使用(注入方式)

        // mymodule.provider(name, constrctor){

        // 创建provider

        mymodule.provider('myprd', function(){//这个构造函数内不能注入变量

            // this.username = myname;

            this.hi = function(){

                return 'hello, glad to see you, i am ';

            };

            this.$get = function(){ return this; };

        });

        //provider方法内部的执行过程应该类似这样的：

        /*mymodule.provider(prdname, fn){

            prdname = (new fn()).$get();

        }*/

        mymodule.controller('myctrl4', function($scope, myname, myprd){

            $scope.username = myname;

            $scope.greeting = myprd.hi();

        });

        //service  和  provider差不多，只是service可以注入模块内定义的变量

        //mymodule.service(name, construction){ name constction感觉就是函数名和函数体的关系

        //创建service

        mymodule.service('svc',function(myname){

            this.username = myname;

            this.hi = function(){ return "so happy to see you again~~, " + myname; };

        });

        // mymodule.service内部的执行过程应该类似这样：

        /*mymodule.service(svcname,fn){

            svcname = function(myname){ return new fn(myname) ;}('sindy'); //用自执行匿名函数包装 new fn(para),para由依赖系统注入自执行匿名函数

        }*/

        // 使用service

        mymodule.controller('myctrl5', function($scope, myname, svc){

            $scope.username = myname;

            $scope.greeting = svc.hi();

        });

        // 在模块内定义常量

        // mymodule.constant(name, obj);

        mymodule.constant('age', 25);

        // 使用常量 跟value, factory, provider, service等模块内数据一样，通过注入的方式使用

        mymodule.controller('myctrl6', function($scope, age, myname){

            $scope.howold = "you are " + age + " years old.";

            $scope.username = myname;

        });

    </script>

    <div ng-controller="myctrl">

        <h1>双向数据绑定</h1>

        <p><input type="text" ng-model="test" /> {{test}}</p>

    </div>

    <div ng-controller="myctrl2">

        <h1>mymodule.value</h1>

        <p><input type="text" ng-model="username" /> myname is:{{username}}</p>

    </div>

    <div ng-controller="myctrl3">

        <h1>mymodule.factory</h1>

        <h3 class="dashed">{{username}}</h3>

        <input  type="text" ng-model="greeting" />

    </div>

    <div ng-controller="myctrl4">

        <h1>mymodule.provider</h1>

        <h3 class="dashed">{{username}}</h3>

        <input type="text" ng-model="greeting" />

    </div>

    <div ng-controller="myctrl5">

        <h1>mymodule.service</h1>

        <h3 class="dashed">{{username}}</h3>

        <input type="text" ng-model="greeting" />

    </div>

    <div ng-controller="myctrl6">

        <h1>mymodule.constant</h1>

        <h3 class="dashed">{{username}} {{howold}} </h3>

    </div>

</body>

</html>