angularJS 2.1  ngForm

  1. <!DOCTYPE html>
  2. <html lang="zh-cn" ng-app>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width,initial-scale=1">
  6.         <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  7.         <title>angularjs</title>
  8.         <link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
  9.         <link rel="stylesheet/less" href="styles/site.less">
  10.         <script src="scripts/jquery.js"></script>
  11.         <script src="bootstrap/js/bootstrap.js"></script>
  12.         <script src="scripts/less.js"></script>
  13.         <script src="scripts/angular-1.2.5.js"></script>
  14.     </head>
  15.     <body class="container">
  16.         <header class="page-header"><h1>index</h1></header>
  17.  
  18.         <section>
  19.             <input ng-model="num" />{{num}}
  20.             <button ng-model="msg" ng-click="msg=msg+1">{{msg}}1</button>
  21.         </section>
  22.  
  23.         <div>
  24.  
  25.             <form id="frmLogin" name="frmLogin" action="index.html">
  26.  
  27.                 <div class="form-group has-feedback" data-ng-class="frmLogin.userName.$dirty?(frmLogin.userName.$valid?'has-success':'has-error'):''">
  28.                     <label for="userName" class="control-label">UserName</label>
  29.                     <input class="form-control" type="text" name="userName" id="userName" data-ng-model="userName" required data-ng-minlength="3" data-ng-maxlength="6">
  30.                     <span data-ng-show="frmLogin.userName.$dirty && frmLogin.userName.$valid" data-ng-class="'glyphicon-ok'" class="glyphicon form-control-feedback"></span>
  31.                     <span data-ng-show="frmLogin.userName.$dirty && frmLogin.userName.$invalid" data-ng-class="'glyphicon-remove'" class="glyphicon form-control-feedback"></span>
  32.                 </div>
  33.  
  34.                 <div class="form-group has-feedback" data-ng-class="frmLogin.email.$dirty?(frmLogin.email.$valid?'has-success':'has-error'):''">
  35.                     <label for="email" class="control-label">Email</label>
  36.                     <input class="form-control" type="email" name="email" id="email" data-ng-model="email" required>
  37.                     <span data-ng-show="frmLogin.email.$dirty && frmLogin.email.$valid" data-ng-class="'glyphicon-ok'" class="glyphicon form-control-feedback"></span>
  38.                     <span data-ng-show="frmLogin.email.$dirty && frmLogin.email.$invalid" data-ng-class="'glyphicon-remove'" class="glyphicon form-control-feedback"></span>
  39.                 </div>
  40.  
  41.                 <p class="text-right">
  42.                     <button data-ng-disabled="frmLogin.$invalid" type="submit" class="btn btn-primary">Login{{msg}}</button>
  43.                 </p>
  44.  
  45.             </form>
  46.         </div>
  47.  
  48.         <footer class="navbar-fixed-bottom text-center">
  49.             <span>&copy; 2015</span>
  50.         </footer>
  51.     </body>
  52. </html>

angularJS 2.2

  1. <!DOCTYPE html>
  2. <html lang="zh-CN" data-ng-app="">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>angular 入门3</title>
  8.     <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
  9.     <!--[if lt IE 9]>
  10.     <script src="../bootstrap/html5shiv.min.js"></script>
  11.     <script src="../bootstrap/respond.min.js"></script>
  12.     <![endif]-->
  13.     <script src="../scripts/jquery-1.12.2.min.js"></script>
  14.     <script src="../bootstrap/js/bootstrap.min.js"></script>
  15.     <script src="../scripts/angular-1.2.5.js"></script>
  16. </head>
  17. <body>
  18. <div class="container">
  19.     <p class="page-header">ng-change</p>
  20.     <div ng-controller="changeCtrl">
  21.         <label id="lbl" class="label label-info"></label>
  22.         <input ng-model="msg" ng-change="changeFunc(msg)" type="text" class="form-control">
  23.         <button class="btn btn-primary" type="button"  ng-click="clickFunc()">submit</button>
  24.     </div>
  25.     <script>
  26.         function changeCtrl($scope){
  27.             $scope.clickFunc= function () {
  28.                 $("p").html($("#lbl").html());
  29.             }
  30.             $scope.changeFunc= function (msg) {
  31.                 var reg=/tarena/gi;
  32.                  // $("#lbl").html(msg);
  33.                 $("#lbl").html(msg.replace(reg,'达内'));
  34.             };
  35.         }
  36.     </script>
  37.     <p class="page-header text-primary">ng-click   ng-dblclick</p>
  38.     <div ng-controller="bookCtrl">
  39.        <ul class="list-group">
  40.            <li class="list-group-item" ng-repeat="b in books">
  41.                <span class="glyphicon glyphicon-bookmark"></span>
  42.                <span ng-dblclick="showPrice($event.target)" data-price="{{b.Price}}">{{b.Title}}</span>
  43.                <span data-id="{{b.Id}}" ng-click="hideFunc($event.target)" style="cursor:pointer;" class="pull-right glyphicon glyphicon-remove"></span>    <!--pull-right右对齐-->
  44.                    <!-- data-id属性随便定义  ng-click函数传参数要多添加一个 $-->
  45.            </li>
  46.        </ul>
  47.     </div>
  48.     <script>
  49.         function bookCtrl($scope,$http){
  50.             $scope.showPrice=function(event){alert($(event).attr("data-price"))};
  51.             $scope.hideFunc=function(event){
  52.                 alert("要删除的编号是： "+$(event).attr("data-id"));
  53.                 $(event).parent().hide(1000);   // 找其父类隐藏
  54.             }
  55.             $http.get("books.json").success(function (msg) {
  56.                 $scope.books=msg;
  57.             });
  58.         }
  59.     </script>
  60.     <h1 class="page-header text-primary">ng-mouseenter  ng-mouseleave </h1>
  61.     <div ng-init="l=[1,2,3,4,5,6]">
  62.             <div ng-repeat="m in l" class="col-sm-2">
  63.                 <img class="img-responsive" src="data:images/{{m}}.jpg"/>
  64.             </div>
  65.     </div>
  66.     <h1 class="page-header text-primary">ng-form 太复杂 不现实 </h1>
  67.     <form id="frmLogin" name="frmLogin" action="0.html">
  68.                <div class="form-group has-feedback" data-ng-class="frmLogin.email.$dirty?(frmLogin.email.$valid?'has-success':'has-error'):''">
  69.             <label class="control-label" for="email" name="email">email</label>
  70.             <input required class="form-control" id="email" type="email">
  71.             <span  class="form-control-feedback glyphicon glyphicon-ok"></span> <!--一个打勾  form-control-feedback 让图标加到标签里面-->
  72.             <p class="text-right">   <!--按钮右对齐-->
  73.                 <button ng-disabled="frmLogin.$invalid" type="submit" class="btn btn-primary">login</button>
  74.             </p>
  75.         </div>
  76.     </form>
  77.     <h1 class="page-header text-primary">ng-model 简单版  不初始化也可以</h1>
  78.     <input type="text" ng-model="num">{{num}}
  79.     <p class="page-header text-primary">概念：  DI(控制器参数  $http $scope $element; 监听：watch)<br>
  80.     指令：模板包含ng-include 节点控制  ng-style ng-class</p>
  81.     <div style="clear:both;margin-bottom: 100px;"></div>
  82.  
  83. </div>
  84. </body>
  85. </html>

angularJS 2.3 route 1.0 (比较乱)

  1. <!DOCTYPE html>
  2. <html lang="zh-CN" data-ng-app="app1">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>angular route</title>
  8.     <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
  9.     <!--[if lt IE 9]>
  10.     <script src="../bootstrap/html5shiv.min.js"></script>
  11.     <script src="../bootstrap/respond.min.js"></script>
  12.     <![endif]-->
  13.     <script src="../scripts/jquery-1.12.2.min.js"></script>
  14.     <script src="../bootstrap/js/bootstrap.min.js"></script>
  15.     <!--angularJS 1.4 并引入route.js -->
  16.     <script src="../scripts/angular.min.js"></script>
  17.     <script src="../scripts/angular-route.min.js"></script>
  18. </head>
  19. <body>
  20. <div class="container">
  21.     <!--标准情况下
  22.     controller.js
  23.      function testController($scope){
  24.         $scope.msg="test123";
  25.     }
  26.      module.js
  27.     var app=angular.module("app1",[]);
  28.     app.controller("test",testController);
  29.  
  30.     html
  31.      <div ng-controller="test">
  32.         {{msg}}
  33.     </div>
  34.      -->
  35.     <div ng-controller="test">
  36.         {{msg}}
  37.     </div>
  38.     <div class="row">
  39.         <div class="col-sm-6">
  40.             <!--
  41.             先执行 <a href="#login",找到路由配置里面的when('/login'),找下一行的login.html
  42.             先找<script id="login.html"> 把里面的模板内容显示在 ng-view的div中
  43.             如果 script id没有，则找新页面login.html
  44.             -->
  45.             <a href="#login" class="btn btn-primary btn-block">Login</a>
  46.             <!--btn-block 平铺效果-->
  47.         </div>
  48.         <div class="col-sm-6">
  49.             <a href="#about?name=haha" class="btn btn-success btn-block">About</a>
  50.             <!--传参-->
  51.         </div>
  52.     </div>
  53.     <!--显示模板内容的占位符 ng-view -->
  54.     <div class="focus" ng-view></div>
  55.     <div class="row">
  56.         <div class="col-sm-6">
  57.             <script id="login.html" type="text/ng-template">
  58.                 <!--Login-->
  59.                 <form>
  60.                     script id ==login.html
  61.                     <legend>
  62.                         <caption>{{loginTitle}}</caption>
  63.                     </legend>
  64.                     <div class="form-group">
  65.                         <label class="control-label" for = "username" >username</label>
  66.                         <input type="text" class="form-control" id="username">
  67.                     </div>
  68.                 </form>
  69.                 <p>
  70.                     <button type="submit" class="btn btn-block btn-primary">btn</button>
  71.                 </p>
  72.             </script>
  73.         </div>
  74.         <div class="col-sm-6">
  75.             <script id="about.html" type="text/ng-template">
  76.                 <!--About-->
  77.                 this is script id about.html
  78.                 <blockquote><h2>{{aboutTitle}}</h2></blockquote>
  79.                <div class="thumbnail">
  80.                    <img class="img-responsive" alt="" src="data:images/Koala.jpg" />
  81.                    <div class="caption">
  82.                        <h4>About me</h4>
  83.                        <p>这是图片的描述信息</p>
  84.                    </div>
  85.                </div>
  86.             </script>
  87.         </div>
  88.     </div>
  89.  
  90.     <div style="clear:both;margin-bottom: 100px;"></div>
  91. </div>
  92. <script>
  93.     var app=angular.module("app1",['ngRoute']);  // 添加路由
  94.     app.controller("test",testController).
  95.             controller("loginCtrl",loginController)
  96.             .controller("aboutCtrl",aboutController)
  97.             .controller("welcomeCtrl",welcomeController)
  98.  
  99. //    路由配置
  100.     app.config(["$routeProvider", function ($routeProvider) {
  101.         $routeProvider
  102.                 .when("/welcome",{
  103.                     templateUrl:"../test/welcome.html",    // 设置一个默认的
  104.                     controller:"welcomeCtrl"
  105.                 })
  106.                 .when("/login",{
  107.                     templateUrl:"login.html",    // 找 script id
  108.                     controller:"loginCtrl"
  109.                 })
  110.                 .when("/about",{
  111.                     templateUrl:"../test/about.html",// 具体文件所在路径,找具体文件
  112.                     controller:"aboutCtrl"
  113.                 })
  114.                 .otherwise({
  115.                     redirectTo:"/welcome"
  116.                 });
  117.     }]);
  118.     function testController($scope){
  119.         $scope.msg="test123";
  120.     }
  121.     function loginController($scope){
  122.         $scope.loginTitle='user login';
  123.     }
  124.     function aboutController($scope,$routeParams){    /*控制器可用在对应的html中，也可用在script里对应的html中*/
  125.         $scope.aboutTitle='about me';
  126.         $scope.name=$routeParams.name;  // 接收传递的参数
  127.     }
  128.     function welcomeController($scope,$routeParams){
  129.         $scope.userName = $routeParams.userName;
  130.     }
  131. </script>
  132. </body>
  133. </html>

angularJS 2.3 route 2.0

  1. <!DOCTYPE html>
  2. <html lang="zh-CN" data-ng-app="bookApp">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>angular route</title>
  8.     <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
  9.     <!--[if lt IE 9]>
  10.     <script src="../bootstrap/html5shiv.min.js"></script>
  11.     <script src="../bootstrap/respond.min.js"></script>
  12.     <![endif]-->
  13.     <script src="../scripts/jquery-1.12.2.min.js"></script>
  14.     <script src="../bootstrap/js/bootstrap.min.js"></script>
  15.     <!--angularJS 1.4 并引入route.js -->
  16.     <script src="../scripts/angular.min.js"></script>
  17.     <script src="../scripts/angular-route.min.js"></script>
  18. </head>
  19. <body>
  20. <div class="container">
  21.     <div ng-controller="resultCtrl"> {{name}}</div>
  22.     <div ng-view></div>     <!--需要写一个ng-view来显示路由页面-->
  23. </div>
  24. <script>
  25.     var app=angular.module("bookApp",['ngRoute']);  // 添加路由
  26. //    路由配置
  27.     app.config(["$routeProvider", function ($routeProvider) {
  28.         $routeProvider
  29.                 .when("/search",{
  30.                     templateUrl:"../test/searchBook.html"
  31.                 })
  32.                 .when("/result",{
  33.                     templateUrl:"../test/resultBook.html",
  34.                     controller:"resultCtrl"
  35.                 })
  36.                 .otherwise({
  37.                     redirectTo:"/search"
  38.                 });
  39.     }]);
  40.     app.controller("resultCtrl", function ($scope,$http,$routeParams) {
  41.         $scope.name='name123';
  42.         $scope.title=$routeParams.t;
  43.         $http.get("books.json")
  44.                 .success(function (r) {
  45.                    for(var i=0;i< r.length;i++){
  46.                        if(r[i].Title==$scope.title){
  47.                            $scope.book= r[i];
  48.                        }
  49.                    }
  50.                 });
  51.     })
  52. </script>
  53. </body>
  54. </html>

2.0对应的searchBook.html

  1. <h2>searchBook.html </h2>
  2. <div class="row">
  3.     <div class="col-sm-6">
  4.         <input ng-model="myTitle" type="search" class="form-control">
  5.     </div>
  6.     <div class="col-sm-2">
  7.         <a href="#result?t={{myTitle}}" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> Search</a>
  8.          <!--指向路由的 #result-->
  9.     </div>
  10. </div>

2.0对应的resultBook.html

  1. <h2>{{book.Title}}<br>{{book.Author}}<br>{{book.Price}}</h2><br/>
  2. <!--以下为复制版-->
  3. <div class="panel panel-info">
  4.     <div class="panel-heading">
  5.         <a href="#search" class="btn btn-success">返回</a>     <!--链接回路径地址-->
  6.     </div>
  7.     <div class="panel-body">
  8.         <div class="thumbnail">
  9.             <div class="col-sm-6">
  10.                 <img alt="{{book.Title}}" ng-src="data:images/Koala.jpg"
  11.                      class="img-responsive img-rounded">
  12.                 <div class="caption">
  13.                     <blockquote class="blockquote-reverse">
  14.                         <h2>{{book.Title}}</h2>
  15.                         <footer>
  16.                             {{book.Author}}
  17.                         </footer>
  18.                     </blockquote>
  19.                 </div>
  20.             </div>
  21.  
  22.             <div class="col-sm-6">
  23.                 <h1 class="page-header"><small>类别名称</small> {{book.Category.Name}} </h1>
  24.                 <h3><small class="label label-danger"> 原始价格：{{book.Price | currency}} </small> &nbsp; <span class="label label-success"> 会员价格：{{book.Price * 0.8 | currency}} </span></h3>
  25.                 <h3 class="well"> 出版日期：{{book.PubDate | date:"yyyy-MM-dd"}} </h3>
  26.  
  27.                 <br>
  28.                 <br>
  29.  
  30.                 <button class="btn btn-primary btn-lg btn-block">
  31.                     <span class="glyphicon glyphicon-shopping-cart"></span>
  32.                     添加到购物车
  33.                 </button>
  34.  
  35.             </div>
  36.  
  37.         </div>
  38.  
  39.     </div>
  40. </div>

angularJS directive 自定义标签

  1. <!DOCTYPE html>
  2. <html lang="zh-CN" data-ng-app="myApp">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>angular route</title>
  8.     <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
  9.     <!--[if lt IE 9]>
  10.     <script src="../bootstrap/html5shiv.min.js"></script>
  11.     <script src="../bootstrap/respond.min.js"></script>
  12.     <![endif]-->
  13.     <script src="../scripts/jquery-1.12.2.min.js"></script>
  14.     <script src="../bootstrap/js/bootstrap.min.js"></script>
  15.     <!--angularJS 1.4 并引入route.js -->
  16.     <script src="../scripts/angular.min.js"></script>
  17.     <script src="../scripts/angular-route.min.js"></script>
  18. </head>
  19. <body>
  20. <div class="container">
  21. {{1+2}}
  22.     <div ng-controller="test">
  23.         <my res="name"></my>      <!--res = 控制器的属性值-->
  24.         <booklist res="books"></booklist>      <!--booklist 标签不能大写。。。。。-->
  25.     </div>
  26. </div>
  27. </body>
  28. </html>
  29. <script>
  30.     angular.module("myApp",[])
  31.             .directive("my", function () {     //标签
  32.                 var d={};
  33.                 d.scope={i:"=res"};                                 // 用 i 来调最终的数据 json值
  34.                 d.template='<button type="button" class="btn btn-primary">{{i.key}}</button>12';
  35.                 d.compile=function(element){   // 添加样式
  36.                     element.css({"font-size":"40px","color":"red","border":"1px solid green"});
  37.                 }
  38.                 return d;
  39.             })
  40.             .directive("booklist", function () {     //标签
  41.                 var d={};
  42.                 d.scope={i:"=res"};                                 // 用 i 来调最终的数据 json值
  43.                 d.template='<ul><li ng-repeat="book in i">{{book.Title}}</li></ul>';
  44.                 return d;
  45.             })
  46.             .controller("test", function ($scope,$http) {
  47.                 $scope.name={key:"button001"};   //最终的数据  key:"xiao"
  48.                 $http.get("books.json")
  49.                         .success(function (r) {
  50.                             $scope.books=r;
  51.                         });
  52.             });
  53. </script>

angularJS 小游戏。。。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN" data-ng-app="myApp">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>angular route</title>
  8.     <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
  9.     <!--[if lt IE 9]>
  10.     <script src="../bootstrap/html5shiv.min.js"></script>
  11.     <script src="../bootstrap/respond.min.js"></script>
  12.     <![endif]-->
  13.     <script src="../scripts/jquery-1.12.2.min.js"></script>
  14.     <script src="../bootstrap/js/bootstrap.min.js"></script>
  15.     <!--angularJS 1.4 并引入route.js -->
  16.     <script src="../scripts/angular.min.js"></script>
  17.     <script src="../scripts/angular-route.min.js"></script>
  18. </head>
  19. <body>
  20. <div class="container">
  21.     <section>
  22.  
  23.         <joke></joke>
  24.         <joke></joke>
  25.         <joke></joke>
  26.         <joke></joke>
  27.  
  28.     </section>
  29.  
  30.     <script>
  31.         angular.module("myApp", [])
  32.                 .directive("joke", function() {
  33.                     var d = {};
  34.                     d.template="<div class='focus'>一碰我就跑~~来点我啊~~</div>"
  35.                     var maxLeft = 400, maxTop = 300;
  36.                     var msg = ["我闪~~", "抓我呀~~~", "雅蠛蝶~~", "噢耶~~", "你真逊~！", "就差那么一点点了！", "继续吧~~总有一天我会累的"];
  37.                     d.compile = function(element, attributes) {
  38.                         element.css({
  39.                             "position" : "absolute",
  40.                             "border" : "1px solid green"
  41.                         }).addClass("focus");
  42.                         element.bind("mouseenter", function(event) {
  43.                             element.css({
  44.                                 "left" : parseInt(Math.random() * 10000 % maxLeft) + "px",
  45.  
  46.                                 "top" : parseInt(Math.random() * 10000 % maxTop) + "px"
  47.                             }).text(msg[parseInt(Math.random() * 10000 % msg.length)]);
  48.                         }).bind("click", function(event) {
  49.                             element.text("噢My Lady Gaga。。。被你逮到了。。。");
  50.                             element.unbind("mouseenter");
  51.                         });
  52.                     }
  53.                     return d;
  54.                 })
  55.     </script>
  56. </div>
  57. </body>
  58. </html>

angularJS 进度条。。

  1. <!DOCTYPE html>
  2. <html lang="zh-cn" data-ng-app="myApp">
  3.     <head>
  4.  
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width,initial-scale=1">
  7.         <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  8.         <title>angularjs</title>
  9.         <link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
  10.         <link rel="stylesheet/less" href="styles/site.less">
  11.         <script src="scripts/jquery.js"></script>
  12.         <script src="bootstrap/js/bootstrap.js"></script>
  13.         <script src="scripts/less.js"></script>
  14.         <script src="scripts/angular.js"></script>
  15.         <script src="scripts/angular-route.js"></script>
  16.  
  17.     </head>
  18.     <body class="container">
  19.         <header class="page-header"><h1>index</h1></header>
  20.  
  21.         <section>
  22.             <div class="progress">
  23.                 <div class="progress-bar progress-bar-striped active"
  24.                      ng-class="c" style="width:{{r}}">{{r}}</div>
  25.             </div>
  26.  
  27.             <div class="btn btn-group">
  28.                 <button ng-click="r='25%';c='progress-bar-success'"
  29.                         type="button"
  30.                         class="btn btn-success">25%</button>
  31.  
  32.                 <button ng-click="r='60%';c='progress-bar-warning'" type="button" class="btn btn-warning">60%</button>
  33.                 <button ng-click="r='85%';c='progress-bar-danger'" type="button" class="btn btn-danger">85%</button>
  34.             </div>
  35.         </section>
  36.  
  37.         <script>
  38.             angular.module("myApp",[]);
  39.         </script>
  40.  
  41.         <footer class="navbar-fixed-bottom text-center">
  42.             <span>&copy; 2015</span>
  43.         </footer>
  44.     </body>
  45. </html>

angularJS factory service

  1. <!DOCTYPE html>
  2. <html lang="zh-CN" data-ng-app="myApp">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>angular route</title>
  8.     <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
  9.     <!--[if lt IE 9]>
  10.     <script src="../bootstrap/html5shiv.min.js"></script>
  11.     <script src="../bootstrap/respond.min.js"></script>
  12.     <![endif]-->
  13.     <script src="../scripts/jquery-1.12.2.min.js"></script>
  14.     <script src="../bootstrap/js/bootstrap.min.js"></script>
  15.     <!--angularJS 1.4 并引入route.js -->
  16.     <script src="../scripts/angular.min.js"></script>
  17.     <script src="../scripts/angular-route.min.js"></script>
  18. </head>
  19. <body>
  20. <div class="container">
  21.     <h1 class="page-header text-primary">factory service value</h1>
  22.     <div ng-controller="test">
  23.       <!-- {{test}}<br>-->
  24.         <input type="text" ng-model="name">
  25.         <span>{{email}}</span>
  26.         <input type="text" ng-model="fn">
  27.         <input type="text" ng-model="ln">
  28.         {{fullName}}
  29.         <button type="button" ng-click="show()">btn</button>
  30.     </div>
  31. </div>
  32. </body>
  33. </html>
  34. <script>
  35.     angular.module("myApp",[])
  36.             .value("defalutEmail","@qq.com")    // value 定义全局变量，提供给多个controller调用
  37.             .value("fname","ha")
  38.             .value("lname","he")
  39.             .factory("myFactory", function () {    //定义 工厂  底层代码复用
  40.                 var f={};
  41.                 f.joinStr= function (a,b) {
  42.                     return a+b;
  43.                 }
  44.                 return f;
  45.             })
  46.             .service("myService", function (myFactory) {  // 定义服务,调用工厂  业务处理
  47.                 this.getEmail= function (m,n) {    //  用  this
  48.                     return myFactory.joinStr(m,n);
  49.                 }
  50.                 this.getFullName= function (f,l) {
  51.                     return myFactory.joinStr(f,l);
  52.                 }
  53.             })
  54.             .controller("test", function ($scope,defalutEmail,myService,fname,lname) {  //  控制器调用 服务
  55.               //  $scope.test=defalutEmail;
  56.                 $scope.name="admin";
  57.                 $scope.email=myService.getEmail($scope.name,defalutEmail);
  58.                 $scope.$watch("name", function (to, from) {   //  to  from  用不到。。
  59.                     $scope.email=myService.getEmail($scope.name,defalutEmail);  //  再写一次。。
  60.                 });
  61.                 $scope.fn=fname;
  62.                 $scope.ln=lname;
  63.                 $scope.fullName=myService.getFullName($scope.fn,$scope.ln);
  64.                /* $scope.$watch("fn", function (to, from) {    //  $watcｈ　只能监听一个
  65.                     $scope.fullName=myService.getFullName($scope.fn,$scope.ln);
  66.                 });*/
  67.                 $scope.show= function () {               // 用 ng-click
  68.                     $scope.fullName=myService.getFullName($scope.fn,$scope.ln);
  69.                 }
  70.             });
  71. </script>

books.json

  1. [
  2.     {
  3.         "Id": 1,
  4.         "Title": "JAVA LOGIC",
  5.         "Author": "Oracle",
  6.         "Price": 10.9999999,
  7.         "PubDate": "2010-01-01",
  8.         "Category": {
  9.             "Id": 1,
  10.             "Name": "计算机类"
  11.         }
  12.     },
  13.     {
  14.         "Id": 2,
  15.         "Title": "HTML",
  16.         "Author": "W3C",
  17.         "Price": 20.99,
  18.         "PubDate": "2010-02-01",
  19.         "Category": {
  20.             "Id": 1,
  21.             "Name": "计算机类"
  22.         }
  23.     },
  24.     {
  25.         "Id": 3,
  26.         "Title": "SQL BASIC",
  27.         "Author": "Microsoft",
  28.         "Price": 30.99,
  29.         "PubDate": "2010-03-01",
  30.         "Category": {
  31.             "Id": 1,
  32.             "Name": "计算机类"
  33.         }
  34.     },
  35.     {
  36.         "Id": 4,
  37.         "Title": "C# LOGIC",
  38.         "Author": "Microsoft",
  39.         "Price": 40.99,
  40.         "PubDate": "2010-04-01",
  41.         "Category": {
  42.             "Id": 1,
  43.             "Name": "计算机类"
  44.         }
  45.     },
  46.     {
  47.         "Id": 5,
  48.         "Title": "JAVA OOP",
  49.         "Author": "Oracle",
  50.         "Price": 50.99,
  51.         "PubDate": "2010-05-01",
  52.         "Category": {
  53.             "Id": 1,
  54.             "Name": "计算机类"
  55.         }
  56.     },
  57.     {
  58.         "Id": 6,
  59.         "Title": "JAVASCRIPT",
  60.         "Author": "W3C",
  61.         "Price": 10.99,
  62.         "PubDate": "2010-01-01",
  63.         "Category": {
  64.             "Id": 1,
  65.             "Name": "计算机类"
  66.         }
  67.     },
  68.     {
  69.         "Id": 7,
  70.         "Title": "JSP",
  71.         "Author": "Oracle",
  72.         "Price": 20.99,
  73.         "PubDate": "2010-02-01",
  74.         "Category": {
  75.             "Id": 1,
  76.             "Name": "计算机类"
  77.         }
  78.     },
  79.     {
  80.         "Id": 8,
  81.         "Title": "SQL ADVANCE",
  82.         "Author": "Microsoft",
  83.         "Price": 30.99,
  84.         "PubDate": "2010-03-01",
  85.         "Category": {
  86.             "Id": 1,
  87.             "Name": "计算机类"
  88.         }
  89.     },
  90.     {
  91.         "Id": 9,
  92.         "Title": "C# OOP",
  93.         "Author": "Microsoft",
  94.         "Price": 40.99,
  95.         "PubDate": "2010-04-01",
  96.         "Category": {
  97.             "Id": 1,
  98.             "Name": "计算机类"
  99.         }
  100.     },
  101.     {
  102.         "Id": 10,
  103.         "Title": "NTIER",
  104.         "Author": "Microsoft",
  105.         "Price": 50.99,
  106.         "PubDate": "2010-05-01",
  107.         "Category": {
  108.             "Id": 1,
  109.             "Name": "计算机类"
  110.         }
  111.     },
  112.     {
  113.         "Id": 11,
  114.         "Title": "ASP.NET",
  115.         "Author": "Microsoft",
  116.         "Price": 10.99,
  117.         "PubDate": "2010-01-01",
  118.         "Category": {
  119.             "Id": 1,
  120.             "Name": "计算机类"
  121.         }
  122.     },
  123.     {
  124.         "Id": 12,
  125.         "Title": "AJAX",
  126.         "Author": "Microsoft",
  127.         "Price": 20.99,
  128.         "PubDate": "2010-02-01",
  129.         "Category": {
  130.             "Id": 1,
  131.             "Name": "计算机类"
  132.         }
  133.     },
  134.     {
  135.         "Id": 13,
  136.         "Title": "HIBERNATE",
  137.         "Author": "Oracle",
  138.         "Price": 30.99,
  139.         "PubDate": "2010-03-01",
  140.         "Category": {
  141.             "Id": 1,
  142.             "Name": "计算机类"
  143.         }
  144.     },
  145.     {
  146.         "Id": 14,
  147.         "Title": "STRUTS",
  148.         "Author": "Oracle",
  149.         "Price": 40.99,
  150.         "PubDate": "2010-04-01",
  151.         "Category": {
  152.             "Id": 1,
  153.             "Name": "计算机类"
  154.         }
  155.     },
  156.     {
  157.         "Id": 15,
  158.         "Title": "SPRING",
  159.         "Author": "Oracle",
  160.         "Price": 50.99,
  161.         "PubDate": "2010-05-01",
  162.         "Category": {
  163.             "Id": 1,
  164.             "Name": "计算机类"
  165.         }
  166.     },
  167.     {
  168.         "Id": 16,
  169.         "Title": "西游记",
  170.         "Author": "吴承恩",
  171.         "Price": 10.99,
  172.         "PubDate": "2010-01-01",
  173.         "Category": {
  174.             "Id": 2,
  175.             "Name": "文学类"
  176.         }
  177.     },
  178.     {
  179.         "Id": 17,
  180.         "Title": "三国演义",
  181.         "Author": "罗贯中",
  182.         "Price": 20.99,
  183.         "PubDate": "2010-02-01",
  184.         "Category": {
  185.             "Id": 2,
  186.             "Name": "文学类"
  187.         }
  188.     },
  189.     {
  190.         "Id": 18,
  191.         "Title": "水浒传",
  192.         "Author": "施耐庵",
  193.         "Price": 30.99,
  194.         "PubDate": "2010-03-01",
  195.         "Category": {
  196.             "Id": 2,
  197.             "Name": "文学类"
  198.         }
  199.     },
  200.     {
  201.         "Id": 19,
  202.         "Title": "红楼梦",
  203.         "Author": "曹雪芹",
  204.         "Price": 40.99,
  205.         "PubDate": "2010-04-01",
  206.         "Category": {
  207.             "Id": 2,
  208.             "Name": "文学类"
  209.         }
  210.     },
  211.     {
  212.         "Id": 20,
  213.         "Title": "傲慢与偏见",
  214.         "Author": "简奥斯汀",
  215.         "Price": 10.99,
  216.         "PubDate": "2010-01-01",
  217.         "Category": {
  218.             "Id": 2,
  219.             "Name": "文学类"
  220.         }
  221.     },
  222.     {
  223.         "Id": 21,
  224.         "Title": "呼啸山庄",
  225.         "Author": "艾米莉勃朗特",
  226.         "Price": 20.99,
  227.         "PubDate": "2010-02-01",
  228.         "Category": {
  229.             "Id": 2,
  230.             "Name": "文学类"
  231.         }
  232.     },
  233.     {
  234.         "Id": 22,
  235.         "Title": "战争与和平",
  236.         "Author": "列夫托尔斯泰",
  237.         "Price": 30.99,
  238.         "PubDate": "2010-03-01",
  239.         "Category": {
  240.             "Id": 2,
  241.             "Name": "文学类"
  242.         }
  243.     },
  244.     {
  245.         "Id": 23,
  246.         "Title": "红与黑",
  247.         "Author": "司汤达",
  248.         "Price": 40.99,
  249.         "PubDate": "2010-04-01",
  250.         "Category": {
  251.             "Id": 2,
  252.             "Name": "文学类"
  253.         }
  254.     },
  255.     {
  256.         "Id": 24,
  257.         "Title": "灰姑娘",
  258.         "Author": "格林",
  259.         "Price": 10.99,
  260.         "PubDate": "2010-01-01",
  261.         "Category": {
  262.             "Id": 3,
  263.             "Name": "儿童类"
  264.         }
  265.     },
  266.     {
  267.         "Id": 25,
  268.         "Title": "卖火柴的小女孩",
  269.         "Author": "格林",
  270.         "Price": 20.99,
  271.         "PubDate": "2010-02-01",
  272.         "Category": {
  273.             "Id": 3,
  274.             "Name": "儿童类"
  275.         }
  276.     },
  277.     {
  278.         "Id": 26,
  279.         "Title": "白雪公主",
  280.         "Author": "格林",
  281.         "Price": 30.99,
  282.         "PubDate": "2010-03-01",
  283.         "Category": {
  284.             "Id": 3,
  285.             "Name": "儿童类"
  286.         }
  287.     },
  288.     {
  289.         "Id": 27,
  290.         "Title": "睡美人",
  291.         "Author": "格林",
  292.         "Price": 40.99,
  293.         "PubDate": "2010-04-01",
  294.         "Category": {
  295.             "Id": 3,
  296.             "Name": "儿童类"
  297.         }
  298.     },
  299.     {
  300.         "Id": 28,
  301.         "Title": "小红帽",
  302.         "Author": "安徒生",
  303.         "Price": 10.99,
  304.         "PubDate": "2010-05-01",
  305.         "Category": {
  306.             "Id": 3,
  307.             "Name": "儿童类"
  308.         }
  309.     },
  310.     {
  311.         "Id": 29,
  312.         "Title": "拇指姑娘",
  313.         "Author": "安徒生",
  314.         "Price": 20.99,
  315.         "PubDate": "2010-06-01",
  316.         "Category": {
  317.             "Id": 3,
  318.             "Name": "儿童类"
  319.         }
  320.     },
  321.     {
  322.         "Id": 30,
  323.         "Title": "青蛙王子",
  324.         "Author": "安徒生",
  325.         "Price": 30.99,
  326.         "PubDate": "2010-07-01",
  327.         "Category": {
  328.             "Id": 3,
  329.             "Name": "儿童类"
  330.         }
  331.     },
  332.     {
  333.         "Id": 31,
  334.         "Title": "海的女儿",
  335.         "Author": "安徒生",
  336.         "Price": 40.99,
  337.         "PubDate": "2010-08-01",
  338.         "Category": {
  339.             "Id": 3,
  340.             "Name": "儿童类"
  341.         }
  342.     }
  343. ]

angularJS 二的更多相关文章

  1. 走进AngularJs(二) ng模板中常用指令的使用方式

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...

  2. AngularJS 二 指令介绍

    初始化AngularJS框架 ng-app指令: 在NG-程序指令是AngularJS应用程序的起点.它自动初始化AngularJS框架.AngularJS框架将在加载整个文档之后首先检查HTML文档 ...

  3. AngularJs (二) 搭建Deployd 服务爬坑

    Deployd 爬坑 按照书上的教程,介绍Deployd 这个东东,首先进入其deployd.com/网页,发现这个东东着实厉害. THE SIMPLEST WAY TO BUILD AN API 按 ...

  4. Mastering Web Application Development with AngularJS 读书笔记-前记

    学习AngularJS的笔记,这个是英文版的,有些地方翻译的很随意,做的笔记不是很详细,用来自勉.觉得写下来要比看能理解的更深入点.有理解不对的地方还请前辈们纠正! 一.关于<Mastering ...

  5. 前端MVC学习总结（二）——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

  6. AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

    Rating是一个用于打分或排名的控件.看一个最简单的例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" x ...

  7. angularjs（二）模板终常用的指令的使用方法

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...

  8. Angularjs学习笔记（二）----模块

    一.定义 如何将全局定义的控制器模块化 先看下全局定义的控制器 var HelloCtrl=function($scope){ $scope.name='World'; } 模块化后代码 angula ...

  9. Mastering Web Application Development with AngularJS 读书笔记(二)

    第一章笔记 (二) 一.scopes的层级和事件系统(the eventing system) 在层级中管理的scopes可以被用做事件总线.AngularJS 允许我们去传播已经命名的事件用一种有效 ...

随机推荐

  1. 常用js正则归类

    //定义正则表达式 //title,只能是数字字母汉字开头,不能以下划线结尾,不包含特殊字符3-20 var title = /^(?!_)(?!.*?_$)[)(\sa-zA-Z0-9_\u4e00 ...

  2. Largest BST Subtree

    Given a binary tree, find the largest subtree which is a Binary Search Tree (BST), where largest mea ...

  3. nyoj366_D的小L_字典序_全排列

    D的小L 时间限制:4000 ms  |  内存限制:65535 KB 难度:2   描述       一天TC的匡匡找ACM的小L玩三国杀,但是这会小L忙着哩,不想和匡匡玩但又怕匡匡生气,这时小L给 ...

  4. vector在C++中的基本用法

    在写BlackJackGame的时候,考虑到要用到容器,所以就对容器的相关知识强化了一下: 因为我想的是有card类,最后要实现发牌,洗牌等等一系列的操作的时候,使用指向card类的对象的指针,将ca ...

  5. sql的优化相关问题

    这篇文章写的真心不错,值得仔细拜读,所以将其转载过来了. 一.             分析阶段 一 般来说,在系统分析阶段往往有太多需要关注的地方,系统各种功能性.可用性.可靠性.安全性需求往往吸引 ...

  6. ArtDialog简单使用示例

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  7. yii 多模板

    main.php: //替换所有模板 //加载文件名为first的模板 //       'theme'=>'theme1', 'components'=>array(           ...

  8. (转)Delphi工程文件说明

    1.DPR: Delphi Project文件,包含了Pascal代码.应用系统的工程文件2.PAS: Pascal文件,Pascal单元的源代码,可以是与窗体有关的单元或是独立的单元.3.DFM:D ...

  9. [Android Pro] Android 官方推荐 : DialogFragment 创建对话框

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37815413 1. 概述 DialogFragment在android 3.0时 ...

  10. jquery阻止事件冒泡的3种方式

    第一种:return false, 缺点:直接返回了函数,函数后面的语句没法执行了: $('.btn').on('click',function(event){ do something ... re ...