<!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. 分区里的inode号是0号和1号的block

    分区里的inode号是0号和1号的block 我相信大家在使用Linux的时候都遇到过误删文件系统数据的情况,不管是自己误删还是帮人家恢复误删 现在用的比较多的恢复工具大概是ext3grep .ext ...

  2. HDFS 与 GFS 的设计差异

    后端分布式系列」前面关于 HDFS 的一些文章介绍了它的整体架构和一些关键部件的设计实现要点. 我们知道 HDFS 最早是根据 GFS(Google File System)的论文概念模型来设计实现的 ...

  3. Java NIO3：通道和文件通道

    通道是什么 通道式(Channel)是java.nio的第二个主要创新.通道既不是一个扩展也不是一项增强,而是全新的.极好的Java I/O示例,提供与I/O服务的直接连接.Channel用于在字节缓 ...

  4. 让你的站点也支持MarkDown

    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式.Markdown的语法简洁明了.学习容易,而且功能比纯文本更强,因此有很多人 ...

  5. golang reflect

    golang reflect go语言中reflect反射机制.详细原文:地址 接口值到反射对象 package main import ( "fmt" "reflect ...

  6. HTTPS那些事（三）攻击实例与防御（转载）

    原创地址:http://www.guokr.com/blog/148613/   在<HTTPS那些事(二)SSL证书>我描述了使用SSL证书时一些需要注意的安全问题,在这一篇文章里面我再 ...

  7. js中的DOM事件与对象

    概念图 document.getElementById("bb"); 根据id找到bb,只能找一个哦 var aa = document.getElementById(" ...

  8. Chrome开发者工具不完全指南：（三、性能篇）

    卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需 ...

  9. iOS-中app启动闪退的原因

    这种情况应和所谓的内存不足关系不大,很少有程序会在初始化时载入大量内容导致崩溃,并且这类问题也很容易在开发阶段被发现,所以内存不足造成秒退的可能性低(内存不足退,通常是程序用了一段时间,切换了几个画面 ...

  10. struts.xml的编辑

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "- ...