<!DOCTYPE html>

 <html>

 <head>

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

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

     <link href="/js/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />

     <title>itcastNg</title>

     <script>

         (function (window) {

             //此处的代码不会污染全局作用域

             var myApp = window.angular.module('myApp', []);

             myApp.controller('DemoController', function ($scope) {

                 $scope.value = 10;

                 $scope.doCalc = function () {

                     $scope.value *= 2;

                 };

                 $scope.phones = [

                     {

                         "name": "Nexus S",

                         "snippet": "Fast just got faster with Nexus S.",

                         "age": 0

                     },

                     {

                         "name": "Motorola XOOM™ with Wi-Fi",

                         "snippet": "The Next, Next Generation tablet.",

                         "age": 1

                     },

                     {

                         "name": "MOTOROLA XOOM™",

                         "snippet": "The Next, Next Generation tablet.",

                         "age": 2

                     }

                 ];

             });

             myApp.controller('PhoneController', function ($scope, $http) {

                 /* phones.js json数据

                  [

                             {

                                 "name": "Nexus S",

                                 "snippet": "Fast just got faster with Nexus S.",

                                 "age": 0,

                                 "imageUrl": "/img/01.png",

                                 "id":1

                             },

                             {

                                 "name": "Motorola XOOM™ with Wi-Fi",

                                 "snippet": "The Next, Next Generation tablet.",

                                 "age": 1,

                                 "imageUrl": "/img/02.png",

                                 "id": 2

                             },

                             {

                                 "name": "MOTOROLA XOOM™",

                                 "snippet": "The Next, Next Generation tablet.",

                                 "age": 2,

                                 "imageUrl": "/img/03.png",

                                 "id": 3

                             }

                  ]

                 */

                 //json/phones.js 换成上面的json

                 $http.get('/html/angular/json/phones.js').success(function (data) {

                     $scope.phones = data;

                 });

             });

         })(window);

     </script>

     <style>

         .red { color: red; }

     </style>

 </head>

 <body>

     <div class="container" ng-app="myApp">

         <div class="row" ng-controller="DemoController">

             <div class="col-md-12">

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

                 <input type="button" ng-click="doCalc()" value="*2" />

                 <br />

                 <input type="checkbox" ng-model="v"><span ng-class="{'red':v}">v</span><br />

             </div>

             <div class="row">

                 <div class="col-md-6">

                     <ul>

                         <li ng-repeat="phone in phones">

                             {{phone.name}}

                             <p>{{phone.snippet}}</p>

                         </li>

                     </ul>

                     <p>Total number of phones: {{phones.length}}</p>

                 </div>

                 <div class="col-md-6">

                     <div>

                         <!--Sidebar content-->

                         Search: <input ng-model="query"> - <span>{{query}}</span>

                     </div>

                     <div>

                         <!--Body content-->

                         <ul>

                             <li ng-repeat="phone in phones | filter:query">

                                 {{phone.name}}

                                 <p>{{phone.snippet}}</p>

                             </li>

                         </ul>

                     </div>

                 </div>

             </div>

         </div>

         <div class="row" ng-controller="PhoneController">

             Search: <input ng-model="query">

             Sort by:

             <select ng-model="orderProp">

                 <option value="name">Alphabetical</option>

                 <option value="age">Newest</option>

             </select>

             <ul>

                 <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">

                     {{phone.name}}

                     <p>{{phone.snippet}}</p>

                 </li>

             </ul>

         </div>

         <hr />

     </div>

 </body>

 </html>

或者简单点...

  angular.module("myapp", [])

         .controller("phoneController", function ($scope, $http, $location) {

            //todo...

         });

angular.js规范写法的更多相关文章

  1. angular.js写法不规范导致错误

    以下写法:没有明确指定module和controller,写法不规范. 更改angular.js版本会出bug. <html ng-app> <head> <title& ...

  2. Angular.js浅谈

    至今博主对于MVVM框架比较了解的就只能算有Angular了,首先给大家明确一个概念,Angular1.x才能叫Angular.js,而Angular2.4.5都直接叫Angular了,因为从2开始已 ...

  3. Angular JS + Express JS入门搭建网站

    3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外 ...

  4. 学习angular.js的一些笔记想法(上)

    1.data-ng-app与ng-app的区别 data-ng-app是为了h5不报错 2.ng-class 不多说就来拿例子说吧 html代码 <div class='color-change ...

  5. Angular.js+Bootstrap实现手风琴菜单

    说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...

  6. angular.js——小小记事本3

    app.js部分,首先是路由.这个之前讲过了,链接在这里—— http://www.cnblogs.com/thestudy/p/5661556.html var app = angular.modu ...

  7. angular.js之路由的选择

    在一个单页面中,我们可以添加多个模块,使得网页只在需要的时候加载这个模块.模块的切换大致上可以代替网页的切换,于是,我们便可以通过模块的切换实现网页的切换,这个切换是按需加载的. 乍一看非常普通的东西 ...

  8. Angular.js之自定义指令学习笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. Angular.js学习笔记（三）

    一.过滤器 1.uppercase,lowercase 大小写转换{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRI ...

随机推荐

  1. HTML5- Canvas入门（六）

    已经第六章了,也差不多接近尾声,如果你从第一章耐心follow到本章结束,那你便能掌握canvas的大部分知识点(当然如果要精通,还是得多靠练习,做一些小案例). 今天我们要学习的是canvas的变形 ...

  2. mina框架详解

     转:http://blog.csdn.net/w13770269691/article/details/8614584 mina框架详解 分类: web2013-02-26 17:13 12651人 ...

  3. 【Java并发编程实战】-----“J.U.C”：ReentrantLock之三unlock方法分析

    前篇博客LZ已经分析了ReentrantLock的lock()实现过程,我们了解到lock实现机制有公平锁和非公平锁,两者的主要区别在于公平锁要按照CLH队列等待获取锁,而非公平锁无视CLH队列直接获 ...

  4. Docker+nginx+tomcat7配置简单的负载均衡

    本文为原创,原始地址为:http://www.cnblogs.com/fengzheng/p/4995513.html 本文介绍在Docker上配置简单的负载均衡,宿主机为Ubuntu 14.04.2 ...

  5. vmware 安装xp 流水账

    1. 分区 PQ分区.1个区,C盘,NTFS. 2. 安装XP 进入ghost,不要选择一键. 然后fromImage, d:\xxx\GHO

  6. 《Entity Framework 6 Recipes》中文翻译系列 (9) -----第二章 实体数据建模基础之继承关系映射TPH

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 2-10 Table per Hierarchy Inheritance 建模 问题 ...

  7. css+div常用属性备忘录

    学习软件设计有一年多了,明年五月就要毕业了.回头看看发现自己其实挺差劲的. 最近开通了博客所以就整理了一下笔记,在这里发布一下自己以前学习css时总是记不住去翻书又很常用的属性,都是一些很基础的. 大 ...

  8. python 邮件基础篇

    python 操作邮件,不是很方便,说实话还不是理解的特别透彻,这次想把自己碰到的东西总结下来 邮件有imap,pop,imap协议,这次使用的是imap4协议,主要用了imap4和mail类, 代码 ...

  9. 深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器

    × 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引 前面的话 上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器 通用形式 $(':eq(index) ...

  10. 窥探Swift编程之在Playground上尽情的玩耍

    自从苹果公司发布Swift的时候,Xcode上又多了一样新的东西---"Playground".Playground就像操场一样,可以供我们在代码的世界里尽情的玩耍,在本篇博客中就 ...