注明:现在用的是最新的1系列1.4版本.

一、细节方面入手:

1，ng-app根节点，一般别写在html上面，最多也就写在body就行了，因为我们难免会忘记这个写在哪里，然后复制一些案例代码却总报错.

<!DOCTYPE html>

<html>

<head>

    <title>基础入门</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <meta http-equiv="Cache-Control" name="no-store" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="HandheldFriendly" content="true" />

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta content="black" name="apple-mobile-web-app-status-bar-style" />

    <meta content="telephone=no" name="format-detection" />

    <link rel="stylesheet" href="css/style.css" />

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

</head>

    <body ng-app="TestApp">

        <section>

            <div ng-controller="app">

                <p>{{greeting.text}},angularjs</p>

                <!--数据双向绑定-->

                <input type="text" placeholder="请输入" ng-model="text"/>

                <p>{{text}}</p>

            </div>

        </section>

    <script>

    (function(angular){

  'use strict';

        var myApp=angular.module("TestApp",[])

        myApp.controller("app",['$scope',function TestApp($scope){

            $scope.greeting={text:'wind'}

        }]);

        })(window.angular);

</script>

<!--

    上面的案例跟下面的案例应该隐藏其中一个来看效果会比较好！

    因为一个页面只允许一个ng-app

-->

    </body>

</html>

2，ng-cloak:在页面动态数据多的时候使用,运行效率最高.

　　 <div ng-cloak>

      <h1>Hello {{name}}</h1>

      <h2>{{user}}</h2>

      <h3>{{well}}</h3>

    </div>

3，(1)、ng-bind:在作用域里面写数据;

<p ng-bind="txt"></p><!--txt在作用域里面写数据-->
(function(angular) {

  'use strict';

angular.module('touch', ['ngSanitize'])

  .controller('Ctrl', ['$scope', function ($scope) {

    $scope.txt = 'World';

}]);

})(window.angular);

(2)、ng-bind-html:安全性高,记得带上模块“ngSanitize”,在页面静态数据多的时候使用.

<body ng-app="touch">

<div ng-controller="Ctrl">

    <div ng-bind-html="hello"></div>

    <div ng-bind-html="world"></div>

</div>

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

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

</body>
(function(angular) {

  'use strict';

angular.module('touch', ['ngSanitize'])

  .controller('Ctrl', ['$scope', function ($scope) {

    $scope.hello='hello';

    $scope.world='world'

}]);

})(window.angular);

4，ng－model:将值绑定到表单元素上,一般绑定表单.

<form >

    <input type='checkbox' ng-model='value'/>

</form>
 

5，ng－repeat:用于数据迭代,遍历数据.

<p>有2种方式遍历数据</p>

    <div>

        <p ng-repeat="row in people">

            <span>{{row.team}}</span>

            <span ng-repeat="member in row.members">{{member.name}}</span>

        </p>

    </div>
(function(angular) {

  'use strict';

        var app = angular.module('angularjs-starter', []);

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

          $scope.people=[

                {team:"Team 1",members: [{name: "Sandra"}, {name: "Bob"}]},

                {team:"Team 2",members: [{name: "Joe"}, {name: "Dee"}]},

                {team:"Team 3",members: [{name: "andra"}, {name: "ob"}]},

                {team:"Team 4",members: [{name: "Carla"},{name: "Joe"}]}

                ];

        });

    })(window.angular);

6，ng-transclude:代码嵌入,先在template内写明插入的位置即可.

<body ng-app="transclude">

    <div ng-controller="ExampleController">

  <input ng-model="title"> <br/>

  <textarea ng-model="text"></textarea> <br/>

  <pane title="{{title}}">{{text}}</pane>

</div>

<script type="text/javascript" src="js/angular.js"></script>
(function(angular) {

  'use strict';

  angular.module('transclude', [])

   .directive('pane', function(){

      return {

        restrict: 'E',

        transclude: true,

        scope: { title:'@' },

        template: '<div style="border: 1px solid black;">' +

                    '<div style="background-color: gray">{{title}}</div>' +

                    '<ng-transclude></ng-transclude>' +

                  '</div>'

      };

  })

  .controller('ExampleController', ['$scope', function($scope) {

    $scope.title = 'Lorem Ipsum';

    $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';

  }]);

        })(window.angular);

7，filter:就是对数据进行筛选,

过滤器（filter）正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。
主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等。
ng内置了一些过滤器，它们是：currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。
currency(货币)、date(日期)：这2个都是放到controller里面操作就行。
filter后面的可以是属性/函数；参数都是对象。
<!DOCTYPE html>

<html>

<head>

    <title>filter</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <meta http-equiv="Cache-Control" name="no-store" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="HandheldFriendly" content="true" />

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta content="black" name="apple-mobile-web-app-status-bar-style" />

    <meta content="telephone=no" name="format-detection" />

    <link rel="stylesheet" href="css/style.css" />

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

</head>

<body ng-app="testApp">

    <div ng-controller="ctrl">

<span>{{'tony'|greet}}</span>

<p>1，uppercase，lowercase大小转换</p>

<p>{{ "lower cap string" | uppercase }}</p><!--大写-->

<p>{{ "TANK is GOOD" | lowercase }}</p><!--小写-->

<hr />

<span>2，json格式化</span>

<p>{{ {foo: "bar", baz: 23} | json }} </p>

<hr />

<span>3,date格式化</span>

<p>{{ date | date }}</p>       <!--结果：May 3, 2011-->

<p>{{ date | date:"MM/dd/yyyy @ h:mma" }}</p>   <!--结果：05/03/2011 @ 6:39AM-->

<p>{{ date | date:"yyyy-MM-dd hh:mm:ss" }}</p>    <!--结果：2011-05-03 06:39:08-->

<span>{{date | date:'medium'}}</span><br>

<span>{{date | date:'yyyy-MM-dd HH:mm:ss Z'}}</span><br>

<span>{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}</span>

<hr />

<span>4，number格式化</span>

<p>{{1.234567 | number:1}}</p>     <!--结果：1.2-->

<p>{{1234567 | number}} </p>      <!-- 结果：1,234,567-->

<hr />

<span>5，currency货币格式化</span>

<p>{{ 250 | currency }}</p>                <!--结果：$250.00-->

<p>{{ 250 | currency:"RMB ￥ " }} </p>      <!--结果：RMB ￥ 250.-->

<hr />

<span>6，filter查找</span>

<!--查找含有有s的行-->

<p ng-repeat="user in users | filter:'s'">

    {{user.age}},{{user.id}},{{user.name}}

</p>

<!--查找name为iphone的行-->

<p ng-repeat="user in users | filter:{'name':'iphone'}">

    {{user.age}},{{user.id}},{{user.name}}

</p>

<hr />

<p>7，limitTo字符串，对像的截取</p>

<p>{{ "i love tank" | limitTo:6 }}</p>     <!--结果：i love-->

<p>{{ "i love tank" | limitTo:-4 }}  </p>      <!--结果：tank-->

<p ng-repeat="user in users | limitTo:1">

    {{user.age}},{{user.id}},{{user.name}}

</p>

  <!--结果：[{"age":20,"id":10,"name":"iphone"}]-->

<hr />

<span>8,orderBy对像排序</span>

<p>根id降序排</p>

<p ng-repeat="user in users | orderBy:'id':true">

    {{user.age}},{{user.id}},{{user.name}}

</p><!--根id降序排-->

<span>根据id升序排</span>

<p ng-repeat="user in users | orderBy:'id'">

    {{user.age}},{{user.id}},{{user.name}}

</p>

<!--根据id升序排-->

<hr />

<!--

     <p {{childrenArray | filter : 'a'}}> </p>

    <p>{{ childrenArray | filter : 4 }}  </p>

    <p>{{ childrenArray | filter : {name : 'i'} }} </p>

    <p>{{ childrenArray | filter : func }}  </p>

     <p>{{ childrenArray | limitTo : 2 }}</p>-->

      <!--<div>{{ childrenArray | orderBy : ['age','name'] }}</div>如果age相同，按照name进行排序

     <div>{{ childrenArray | orderBy : 'age' }}</div> <!--按age属性值进行排序，若是-age，则倒序

    <div>{{ childrenArray | orderBy : orderFunc }}</div>   <!--按照函数的返回值进行排序-->

    </div>

<script>

    (function(angular) {

  'use strict';

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

  .filter('greet',function(){

      return function(user){

          return 'wind-'+user+'!';

      }

  });

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

      $scope.date = new Date().valueOf();

      $scope.users=[

{age: 'age:20',id: 'id:10',name: "name:iphone"},

{age: 'age:12',id: 'id:11',name: "name:sunm xing"},

{age: 'age:44',id: 'id:12',name: "name:test abc"} ]

      /*$scope.childrenArrays = [

        {name:'kimi',age:3},

        {name:'cindy',age:4},

        {name:'anglar',age:4},

        {name:'shitou',age:6},

        {name:'tiantian',age:5}

    ];$scope.func = function(e){return e.age>4;}*/

  })

})(window.angular);

</script>

    </body>

</html>

8，自定义标签

<!doctype html>

<html ng-app="MyModule">

    <head>

    <title>自定义标签</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <meta http-equiv="Cache-Control" name="no-store" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="HandheldFriendly" content="true" />

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta content="black" name="apple-mobile-web-app-status-bar-style" />

    <meta content="telephone=no" name="format-detection" />

    <link rel="stylesheet" href="css/style.css" />

    <body>

    <div ng-controller="testapp">

        <hello></hello>

    </div>

<!--

    hello这个是自定义标签，可以自己定义！！！

    A 属性 <div hello="yes"></div>

    E 标签名称  <hello></hello>

    C 类名称  <div class="hello"></div>

-->

<script src="js/angular.js"></script>

  <script>

(function(angular) {

          'use strict';

var myModule = angular.module("MyModule", []);

myModule.directive("hello", function() {

    return {

        restrict:"AECM",

        template://单行写法:'<span>自定义标签</span>',

                /*这个写法是必须有div包住*/

                '<div>' +'<p>这是一个自定义标签</p>' +'<span>同时还可以套数据,比如:name={{name}}</span>' +'</div>',

    /*不要同时存在，template跟templateUrl几乎一样，一个是加载标签内容，一个是直接加载html文件,建议用templateUrl这样不用操作过多的DOM

     * templateUrl:'template1.html',*/

        replace: true

    }

});

myModule.controller("testapp",['$scope',function MyModule($scope){

            $scope.name="wind"

        }]);

})(window.angular);

/*

myModule.directive('namespaceDirectiveName', function factory(injectables) {

        var directiveDefinitionObject = {

            restrict: string,//指令的使用方式，包括标签，属性，类，注释

            priority: number,//指令执行的优先级

            template: string,//指令使用的模板，用HTML字符串的形式表示

            templateUrl: string,//从指定的url地址加载模板

            replace: bool,//是否用模板替换当前元素，若为false，则append在当前元素上

            transclude: bool,//是否将当前元素的内容转移到模板中

            scope: bool or object,//指定指令的作用域

            controller: function controllerConstructor($scope, $element, $attrs, $transclude){...},//定义与其他指令进行交互的接口函数

            require: string,//指定需要依赖的其他指令

            link: function postLink(scope, iElement, iAttrs) {...},//以编程的方式操作DOM，包括添加监听器等

            compile: function compile(tElement, tAttrs, transclude){

                return: {

                    pre: function preLink(scope, iElement, iAttrs, controller){...},

                    post: function postLink(scope, iElement, iAttrs, controller){...}

                }

            }//编程的方式修改DOM模板的副本，可以返回链接函数

        };

        return directiveDefinitionObject;

});

 */

  </script>

</body>

</html>

restrict - EACM的子集的字符串，它限制directive为指定的声明方式。如果省略的话，directive将仅仅允许通过属性声明
E - 元素名称： <my-directive></my-directive>
A - 属性名： <div my-directive=”exp”></div>
C - class名： <div class=”my-directive:exp;”></div>
M - 注释 ： <!-- directive: my-directive exp -->

9，基本写法:例子可以很明白的告诉你数据绑定,数据同步显示

<div ng-controller="appC">

　　 <p>{{greeting.text}},angularjs</p>

　　　　<input type="text" placeholder="请输入" ng-model="text"/>

 　　<p>{{text}}</p>

 </div>

10，script标签里面的基础写法:(1)、基于匿名函数开发;(2)、用严格模式

(function(angular) {

'use strict';

angular.module('app', [])

.controller('appC', ['$scope', function($scope) {

//这样使用ng-include是必须要写个空的出来，要是有需要再填写函数！

}]);

})(window.angular);

11，路由机制:

ng-view:

<!DOCTYPE html>

<html>

<head>

    <title>ng-view使用</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <meta http-equiv="Cache-Control" name="no-store" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="HandheldFriendly" content="true" />

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta content="black" name="apple-mobile-web-app-status-bar-style" />

    <meta content="telephone=no" name="format-detection" />

    <link rel="stylesheet" href="css/style.css" />

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

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

</head>

    <body ng-app="testApp">

        <div ng-view></div>

    <script>

    (function(angular) {

          'use strict';

        var myApp = angular.module('testApp', ['ngRoute']);//主要添加ngRoute模块(JS文件记得引入)

            myApp.config(['$routeProvider',

              function($routeProvider) {

                $routeProvider.when('/', {

                    templateUrl: 'view/view.html',//纯属路径引入

                    controller: 'viewCtrl'//写了这个之后,在Html文件里面不需要再写ng-controller

                  })

              }]);

              myApp.controller('viewCtrl',['$scope',function($scope){

                }]);

              })(window.angular);

              /*

               when后面的路径必须是在html里面做了个ID来相对应的;

               比如说:

                <li data-target="directive">

                    <a href="#/directive">directive</a>

                </li>

                那么在JS里面就应该写成这样:

                 $routeProvider.when('/directive', {

                    templateUrl: 'view/directive.html',

                    controller: 'directiveCtrl'

                  })

               */

    </script>

    </body>

</html>

ngRoute:一个很不错的路由教程.

<!DOCTYPE html>

<html>

    <head>

    <title>路由</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <meta http-equiv="Cache-Control" name="no-store" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="HandheldFriendly" content="true" />

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta content="black" name="apple-mobile-web-app-status-bar-style" />

    <meta content="telephone=no" name="format-detection" />

    <link rel="stylesheet" href="css/style.css" />

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

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

        <style>

#leftpanel,#rightpanel{padding-bottom:3000px;margin-bottom:-3000px}

#content{border:5px solid #00f;overflow:hidden}

#leftpanel{background-color:#add8e6;width:300px;float:left}

#right{padding-left:300px}

.date{font-size:12px;color:#999}

.content{background-color:#ffffe0}

#container{margin:10px}

        </style>

    </head>

    <body>

        <div ng-app="NewsPub" >

            <script type="text/ng-template" id="list.html">

                <table width="100%" border="1" style="border-collapse:collapse;">

                    <thead>

                        <td>id</td>

                        <td>标题</td>

                        <td>内容</td>

                        <td>发布时间</td>

                    </thead>

                    <tr ng-repeat="news in newsList">

                        <td>{{news.id}}</td>

                        <td><a href='#/detail/{{news.id}}'>{{news.title}}</a></td>

                        <td>{{news.content}}</td>

                        <td>{{news.date}}</td>

                    </tr>

                </table>

            </script>

            <script type="text/ng-template" id="add.html">

                <h1>添加新闻</h1>

                标题：<input type="text" ng-model="title"><br>

                内容：<textarea ng-model="content" cols="30" rows="10" style="vertical-align:top;"></textarea><br>

                    <button ng-click="add()">提交</button>

            </script>

              <script type="text/ng-template" id="edit.html">

                    <h1>编辑新闻{{news.id}}</h1>

                    标题：<input type="text" ng-model="news.title"><br>

                内容：<textarea ng-model="news.content" cols="30" rows="10" style="vertical-align:top;"></textarea><br>

                    <button ng-click="update()">提交</button>

                </script>

                <script type="text/ng-template" id="detail.html">

                    <a href="#/list">返回列表</a>

                    <div id="container">

                        <a href="#/edit/{{news.id}}">编辑</a>

                        <h1>{{news.title}}</h1>

                        <span class="date">发布日期：{{news.date}}</span>

                        <div class="content">正文：   {{news.content}}</div>

                    </div>

                </script>

        <h1>新闻发布系统</h1>

        <div id="content">

            <div id="leftpanel">

                <ul>

                    <li><a href="#/list">新闻列表</a></li>

                    <li><a href="#/add">发布新闻</a></li>

                </ul>

            </div>

            <div id="right">

                <div id="rightpanel" ng-view>abcd</div>

            </div>

        </div>

</div>

<script>

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

function routeConfig($routeProvider){

    $routeProvider.

    when('/', {

        controller: 'ListController',

        templateUrl: 'list.html'

    }).

    when('/detail/:id', {

        controller: 'DetailController',

        templateUrl: 'detail.html'

    }).

    when('/edit/:id', {

        controller: 'EditController',

        templateUrl: 'edit.html'

    }).

    when('/list', {

        controller: 'ListController',

        templateUrl: 'list.html'

    }).

    when('/add', {

        controller: 'AddController',

        templateUrl: 'add.html'

    }).

        otherwise({

            redirectTo: '/'

        });

    };

app.config(routeConfig);

var newsList = [{

    id : 1,

    title : 'title 1111',

    content : 'content 1111111',

    date : new Date()

},{

    id : 2,

    title : 'title 2222',

    content : 'content 2222222',

    date : new Date()

},{

    id : 3,

    title : 'title 3333',

    content : 'content 3333333',

    date : new Date()

},{

    id : 4,

    title : 'title 4444',

    content : 'content 4444444',

    date : new Date()

},{

    id : 3,

    title : 'title 5555',

    content : 'content 5555555',

    date : new Date()

},{

    id : 3,

    title : 'title 6666',

    content : 'content 6666666',

    date : new Date()

},{

    id : 3,

    title : 'title 7777',

    content : 'content 7777777',

    date : new Date()

}];

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

    $scope.newsList = newsList;

});

app.controller('DetailController',function($scope, $routeParams){

    $scope.news = newsList[$routeParams.id-1];

});

app.controller('AddController',function($scope,$location){

    $scope.title = '';

    $scope.content = '';

    $scope.add = function(){

        newsList.push({

            id : newsList.length+1,

            title : $scope.title,

            content : $scope.content,

            date : new Date()

        });

        $location.path('list');

    }

});

app.controller('EditController',function($scope, $routeParams, $location){

    $scope.news = newsList[$routeParams.id-1];

    $scope.update = function(){

        newsList[$routeParams.id-1] = $scope.news;

        $location.path('list');

    }

})

</script>

    </body>

</html>

ng-include:

<!DOCTYPE html>

<html>

<head>

    <title>ng-include使用</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <meta http-equiv="Cache-Control" name="no-store" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="HandheldFriendly" content="true" />

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta content="black" name="apple-mobile-web-app-status-bar-style" />

    <meta content="telephone=no" name="format-detection" />

    <link rel="stylesheet" href="css/style.css" />

</head>

<body ng-app="includeExample">

  <div ng-controller="ExampleController">

    <div ng-include="'template1.html'"></div>

      <div ng-include="'template2.html'"></div>

</div>

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

<script type="text/javascript">

(function(angular) {

  'use strict';

angular.module('includeExample', [])

  .controller('ExampleController', ['$scope', function($scope) {

   //这样使用ng-include是必须要写个空的出来，要是有需要再填写函数！

  }]);

})(window.angular);

</script>

</body>

</html>
templateUrl:
<!doctype html>

<html>

    <head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <meta http-equiv="Cache-Control" name="no-store" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="HandheldFriendly" content="true" />

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta content="black" name="apple-mobile-web-app-status-bar-style" />

    <meta content="telephone=no" name="format-detection" />

    <link rel="stylesheet" href="css/style.css" />

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

    <body ng-app="MyApp">

            <tab></tab>

    </body>

    <script src="js/angular.js"></script>

    <script>

        (function(angular) {

          'use strict';

        var MyApp = angular.module("MyApp", [])

        .directive("tab", function() {

            return {

                restrict: 'AECM',

               templateUrl:'template1.html',

            /*不要同时存在，template跟templateUrl几乎一样，一个是加载标签内容，一个是直接加载html文件

             * template: '<span>hello world</span>',*/

                replace: true

            }

        });

        })(window.angular);

    </script>

</html>

12，$http数据交互:
(1)、添加一个文件夹view，这个文件夹是跟当前的html同级;
(2)、必须基于服务器运行,不然看不到结果.(IDE编辑器是可以的)
<!DOCTYPE html>

<html>

<head>

    <title>首页</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <meta http-equiv="Cache-Control" name="no-store" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="HandheldFriendly" content="true" />

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta content="black" name="apple-mobile-web-app-status-bar-style" />

    <meta content="telephone=no" name="format-detection" />

    <link rel="stylesheet" href="css/style.css" />

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

</head>

    <body ng-app="TestApp">

 <div ng-controller="Shop">

  <h1>Shop!</h1>

  <table>

   <tr ng-repeat="item in items">

    <td>{{item.title}}</td>

    <td>{{item.description}}</td>

    <td>{{item.price | currency}}</td>

   </tr>

  </table>

 </div>

 <script>

 (function(angular){

      'use strict';

        var myApp=angular.module("TestApp",[])

        myApp.controller("Shop",['$scope',"$http",function ($scope, $http){

         $http.get('view/text.json').success(function(data){$scope.items = data;});

        }]);

 })(window.angular);

 </script>

    </body>

</html>


这个是text.json






[{

    "id": 0,

    "title": "Paint pots",

    "description": "Pots full of paint",

    "price": 3.95

}, {

    "id": 1,

    "title": "Polka dots",

    "description": "Dots with that polka groove",

    "price": 12.95

}, {

    "id": 2,

    "title": "Pebbles",

    "description": "Just little rocks, really",

    "price": 6.95

}]







												


											
AngularJs基础总结(1.4版本)的更多相关文章
	

    
								
  1. AngularJS基础入门初探
		
    一.AngularJS简介 1.1 什么是AngularJS (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式 (2)由Misko Hevery 等人创建,2009年被Google所 ...
    
		
    2. 
						
  2. python基础-python解释器多版本共存-变量-常量
		
    一.编程语言的发展史 机器语言-->汇编语言-->高级语言,学习难度及执行效率由高到低,开发效率由低到高 机器语言:二进制编程,0101 汇编语言:用英文字符来代替0101编程 高级语言: ...
    
		
    3. 
						
  3. AngularJS基础知识1
		
    一.angularJS简介 1.什么是 AngularJS? AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库.AngularJS是协助搭建单页面工程 ...
    
		
    4. 
						
  4. AngularJS基础概念
		
    作用域.控制器.指令 作用域 应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文.$scope对象是定义应用业务逻辑.控制器方法和视图属性的地方. 作用域是应用状态的基础.基于动 ...
    
		
    5. 
						
  5. AngularJS 基础教程一：
		
    一:了解AngularJS AngularJS是一款非常优秀的前端高级 JS 框架,由 Misko Hevery 等人创建 2009 年被 Google 收购,用于其多款产品 有一个全职的开发团队继续 ...
    
		
    6. 
						
  6. Angularjs基础教程
		
    Angularjs-基础教程 一些angualr的基础概念,适合入门. 1.下载 推荐 bower 或 npm 安装. bower install angular bower install angu ...
    
		
    7. 
						
  7. AngularJS基础总结
		
    w3shools    angularjs教程  wiki   <AngularJS权威教程> Introduction AngularJS is a JavaScript framewo ...
    
		
    8. 
						
  8. Angularjs基础（学习整理）
		
    AngularJS 通过 ng-directives 扩展了 HTML. ng-app 指令定义一个 AngularJS 应用程序. ng-model 指令把元素值(比如输入域的值)绑定到应用程序.  ...
    
		
    9. 
						
  9. 3天学习完AngularJS基础内容小结
		
    简介:AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. 一.AngularJS大致功能模块 二.页面交互变得简单 1.示例:计算价格 <htm ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【codevs1993】 草地排水
			
    http://codevs.cn/problem/1993/ (题目链接) 题意 求有向图最大流. Solution Dinic. 代码 // codevs1993 #include<algor ...
    
			
    2. 
						
  2. mplayer依赖关系不满足
			
    mplayer以及其他fork出来的如mplayer2是命令行下的媒体播放器.一般ubuntu等的桌面系统都自带.然而自己使用了一段时间后突然出现缺少库文件,各种依赖关系不满足也未能重新安装.为了以后 ...
    
			
    3. 
						
  3. Oracle AWR 数据导入/导出的步骤
			
    LINUX状态下,连接oracle用户:su - oracle  1.上传采集快照.dmp文件至服务器  (dbid:4292035712)  919219826 2.在服务器端创建目录 (即文件夹a ...
    
			
    4. 
						
  4. 洛谷P3128 [USACO15DEC]最大流Max Flow [倍增LCA]
			
    题目描述 Farmer John has installed a new system of  pipes to transport milk between the  stalls in his b ...
    
			
    5. 
						
  5. Scala implicit
			
    Scala implicit implicit基本含义 在Scala中有一个关键字是implicit, 之前一直不知道这个货是干什么的,今天整理了一下. 我们先来看一个例子: def display( ...
    
			
    6. 
						
  6. AngularJs $rootScope.Scope 作用域操作
			
    这里讲的是一些scope的操作,如创建/注销/各种监听及scope间的通信等等. $rootScope.Scope 可以使用$injector通过$rootScope关键字检索的一个根作用域. 可以通 ...
    
			
    7. 
						
  7. Saltstack之SSH（十一）
			
    Saltstack之SSH 安装 yum install -y salt-ssh 官方文档  https://docs.saltstack.com/en/latest/topics/ssh/index ...
    
			
    8. 
						
  8. java编程思想-java集合总结-基本概念
			
    1.java 容器类类库的用途是"保存对象",并将其划分为两个不同的概念: 1)Collection.一个独立元素的序列,这些元素都服从一条或多条规则.List 必须按照插入的顺序 ...
    
			
    9. 
						
  9. 《Java疯狂讲义》（第3版）学习笔记 2 - Java语言的运行机制
			
    内容 1.高级语言的运行机制 2.Java 语言的运行机制 1.高级语言的运行机制 高级语言主要分为编译型语言和解释型语言两类. 编译型语言是指使用专门的编译器.针对特定平台(操作系统)将高级语言源代 ...
    
			
    10. 
						
  10. uC/OS-II互斥信号(OS_mutex)块
			
    /*************************************************************************************************** ...
    
			
    11.