<!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. DBImport v3.44 中文版发布：数据库数据互导及文档生成工具（IT人员必备）

    前言: 距离上一个版本V3.3版本的文章发布,已经是1年10个月前的事了. 其实版本一直在更新,但也没什么大的功能更新,总体比较稳定,所以也不怎么写文介绍了. 至于工作上的事,之前有半年时间跑去学英语 ...

  2. VS轻松开发Node.js应用

    PTVS开发团队又开发出一款可以在VS里编写Node.js应用程序的插件--NTVS(Node.js Tools for Visual Studio),开发者可以在VS里轻松开发Node.js应用. ...

  3. Sharing A Powerful Tool For Application Auto Monitor

    本文分享的这个应用监控小工具,本来是我在五年多以前开发实现的windows服务监控的一个windows服务.听上去比较拗口吧,是的,这个应用一开始就是个监控windows服务的windows服务. 记 ...

  4. TODO：软件升级的那些事

    TODO:软件升级的那些事 软件升级,指软件从低版本向高版本的更新.由于高版本常常修复低版本的部分BUG,所以经历了软件升级,一般都会比原版本的性能更好,得到优化的效果,用户也能有更好的体验. 最近常 ...

  5. mysql 截取身份证出生日期

    ,) ,) as date), '%m-%d') as 生日 from t_person

  6. PHP 数据访问

    如何连接 1.造连接对象 $db= new MySQLi("localhost","root","123","mydb" ...

  7. java中集合类中Collection接口中的Map接口的常用方法熟悉

    1:Map接口提供了将键映射到值的对象.一个映射不能包含重复的键:每个键最多只能映射到一个值.Map接口中同样提供了集合的常用方法. 2:由于Map集合中的元素是通过key,value,进行存储的,要 ...

  8. iOS 真机调试不能连接网络的排错过程

    开发环境: macOS 10.12.1 Xcode 8.1 Qt 5.8 gSOAP 2.8 iPhone 6S+iOS 10.1.1   问题: 使用 Qt Quick 写了一个跨平台的应用,在Wi ...

  9. word-spacing汉字不起作用的解决方法

    异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 调节文字间的距离,发现==>word-spacing汉字不起作用 研究发现, ...

  10. 通知：逆天异常库 V1.0版本支持下载了~~

    百度网盘:http://pan.baidu.com/s/1bongheJ GitHub:https://github.com/dunitian/LoTDotNet