码迷，mamicode.com
首页 > Web开发 > 详细

AngularJs基础总结(1.4版本)

时间：2015-06-17 00:14:19      阅读：256      评论：0      收藏：0      [点我收藏+]

标签：

注明:现在用的是最新的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>
View Code

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>

AngularJs基础总结(1.4版本)

标签：

原文地址：http://www.cnblogs.com/windtony/p/4581992.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！