angular入门

时间:2024-06-15 19:03:56

angular入门

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>angular 入门</title>
    <link rel="stylesheet/less" type="text/css" href="../styles/site2.less">
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="../bootstrap/html5shiv.min.js"></script>
    <script src="../bootstrap/respond.min.js"></script>
    <![endif]-->
    <script src="../scripts/jquery-1.12.2.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <script src="../scripts/less.min.js"></script>
    <script src="../scripts/angular.min.js"></script>
</head>
<body>
<div class="container">
    <p class="page-header">hello</p>

    <!--<div data-ng-app="" data-ng-init="pTotal='合计';pCount='数量';pName='单价';price=10.99;count=5" >-->
    <!--<div data-ng-app="" data-ng-init="book={pTotal:'合计',pCount:'数量',pName:'单价',price:10.99,count:5}" >
        data- 可以省略
        ng-init 少用
        12+3 = {{ 12+3 }}<br>
        &lt;!&ndash;单价:{{price}}<br>
        数量:{{count}}<br>
        合计:{{price*count}}&ndash;&gt;
&lt;!&ndash;
        {{pName}}:{{price}}<br>
        {{pCount}}:{{count}}<br>
        {{pTotal}}:{{price*count}}
&ndash;&gt;
        json格式<br>
        {{book.pName}}:{{book.price}}<br>
        {{book.pCount}}:{{book.count}}<br>
        {{book.pTotal}}:{{book.price*book.count}}

    </div>-->
    <hr>
    <div data-ng-app="">
        <div data-ng-init="books=[
            {pTotal:'合计',pCount:'数量',pName:'单价',price:10.99,count:5},
            {pTotal:'合计',pCount:'数量',pName:'单价',price:20.99,count:15},
            {pTotal:'合计',pCount:'数量',pName:'单价',price:30.99,count:25}
        ]" >
            <div class="list-group">
                <!--data-ng-repeat  循环-->
                <div data-ng-repeat="b in books" class="list-group-item focus">
                    <!-- &lt;!&ndash; data-ng-bind 单向绑定 &ndash;&gt;
                    <span class="label label-success" data-ng-bind="books[0].pName"></span> :{{books[1].price}}<br>-->
                    <span class="label label-success">{{b.pName}}</span>:{{b.price}}<br>

                    <div class="row">
                        <!--data-ng-model 双向绑定 可读可写-->
                        <div class="col-sm-2"><span style="line-height: 35px;">{{b.pCount}}:</span></div>
                        <div class="col-sm-4"><input data-ng-model="b.count" type="number" class="form-control" ></div>
                    </div>

                    {{b.pTotal}}:{{b.price * b.count}}
                </div>
                <!--<div class="list-group-item focus">
                    &lt;!&ndash; data-ng-bind 单向绑定 &ndash;&gt;
                    <span class="label label-success" data-ng-bind="books[0].pName"></span> :{{books[1].price}}<br>
                    {{books[1].pCount}}:{{books[1].count}}<br>
                    {{books[1].pTotal}}:{{books[1].price*books[1].count}}
                </div>
                <div class="list-group-item focus">
                    {{books[2].pName}}:{{books[2].price}}<br>
                    {{books[2].pCount}}:{{books[2].count}}<br>
                    {{books[2].pTotal}}:{{books[2].price*books[2].count}}
                </div>-->
            </div>
        </div>
    <hr>
    <!--一个页面只有一个data-ng-app="" 其他的要用script方式来启动-->
    <div>
        <form class="form-inline" data-ng-init="numA=10;numB=20">
            <div class="form-group">
                <input data-ng-model="numA" type="number" class="form-control">
                <input data-ng-model="numB" type="number" class="form-control">
                <span style="line-height: 35px;"><label  class="label label-warning" >{{numA*numB}}</label></span>
            </div>
        </form>
    </div>
       <!-- <div id="app2" ng-init="func2()"></div>
        <script>
            var app2 = angular.module('app2', []);
            angular.bootstrap(document.getElementById("app2"), ['app2']);
        </script>-->

    </div>
    <!--页脚-->
</div>

</body>
</html>

angular入门2

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>angular 入门</title>
    <!--<link rel="stylesheet/less" type="text/css" href="../styles/site2.less">-->
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="../bootstrap/html5shiv.min.js"></script>
    <script src="../bootstrap/respond.min.js"></script>
    <![endif]-->
    <script src="../scripts/jquery-1.12.2.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <script src="../scripts/less.min.js"></script>
    <script src="../scripts/angular.min.js"></script>
</head>
<body>
<div class="container">
    <p class="page-header">angularJS1.4 controller   单页面应用程序 CRUD(增删查改)<br>
    ng-init 少用,初始化数据由 ng-controller处理</p>
    <div data-ng-app="angularJS1.4">

        <div  data-ng-controller="hello">         <!--多层嵌套controller-->
            <div data-ng-controller="test">
                {{hello+" "+msg}}
            </div>
            {{hello}}  {{person.firstName +" "+  person.lastname}}  <br>
            {{person.fullname()}}<br>
            {{show()}}<br>
            <p class="page-header">books.json内容</p>
            <div data-ng-controller="books">
               <!-- {{getBy(1)}}<hr>
                {{books}}-->
                <div class="row">
                    <div class="col-sm-4 col-sm-offset-8">
                        <input data-ng-model="Title" class="form-control" type="search" placeholder="Search" >
                    </div>
                </div>
                <table class="table table-hover">
                    <tr class="success">
                        <td>Id</td>
                        <td>Title</td>
                        <td>Author</td>
                        <td>Price</td>
                        <td>PubDate</td>
                        <td>Category</td>
                    </tr>
                    <tr data-ng-repeat="b in books|filter:Title| orderBy:['PubDate','Title']">
                        <td>{{b.Id}}</td>
                        <td>{{b.Title|lowercase}}</td>
                        <td>{{b.Author|uppercase}}</td>
                        <td>{{b.Price|currency:"¥"}}</td>           <!--过滤器-->
                        <td>{{b.PubDate|date:"yyyy年MM月dd日"}}</td>
                        <td>{{b.Category.Name}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <!--angularJS1.2.5 controller调用方法-->
    <!--<div data-ng-app="">
        <div  data-ng-controller="helloController">
            {{show()}}
        </div>
    </div>-->
    <script>
//        angularJS1.4以上 controller调用方法
// DI 依赖注入:通过模块注册控制器
// module.js
        angular.module("angularJS1.4",[])
                .controller("hello",helloController)
                .controller("test",testController)
                .controller("books",booksController);
// controller.js
        function helloController($scope){
            $scope.hello="hello word ";   //自定义基本数据类型
            $scope.person={                //定义对象
                firstName:"kang",
                lastname:"jia",
                fullname: function () {
                    return $scope.person.firstName+" "+$scope.person.lastname;
                }
            };
            //定义方法
            $scope.show= function () {
                return $scope.hello+$scope.person.fullname();
            }
        }
        function testController($scope){
            $scope.msg="testController";
        }
        function booksController($scope,$http){
            $http.get("books.json")
                    .success(function (result) {
                        $scope.books=result;
                    });
            $scope.getBy= function (bookId) {
                  for(var i = 0 ;i<$scope.books.length;i++){
                      if($scope.books[i].Id==bookId){
                          return $scope.books[i];
                      }
                  }
                return null;
            };

        }
    </script>
</div>

</body>
</html>

angular 入门3 直接把 data-ng-app="" 写到 html 全局  使用angular-1.2.5.js 调用控制器简单点

<!DOCTYPE html>
<html lang="zh-CN" data-ng-app="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>angular 入门3</title>
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="../bootstrap/html5shiv.min.js"></script>
    <script src="../bootstrap/respond.min.js"></script>
    <![endif]-->
    <script src="../scripts/jquery-1.12.2.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <script src="../scripts/angular-1.2.5.js"></script>
</head>
<body>
<div class="container">
    <p class="page-header">data-ng-app=""写到html中去 使用angular-1.2.5.js</p>
    <div ng-controller="test">
        <div>i am div</div>
        {{name}}<br>
        <span ng-bind="person.age"></span>
    </div>

    <script>
        function test($scope,$element){
            //var e=$element;  // 获得整个div的内容  $element是jquery对象
            var e=$element.children().eq(0);  //获得第一个子元素div的值
            // alert(e.html());
            $scope.name='abc';
            $scope.person={name:'kang',age:12}
        }
    </script>
    <p class="page-header">watch监听</p>
    <div ng-controller="watch">
        <div ng-click="changeSize()" style="width:100px; height:100px;background-color: #5bc0de"></div>
        <div>{{w}}- {{h}}</div>
        <div>
            <input type="text" ng-model="w">
            <input type="text" ng-model="h">
        </div>
    </div>
    <script>
        function watch($scope,$element){
            var div=$element.children().eq(0);
            $scope.w=div.width();
            $scope.h=div.height();    // jquery 方法都有()
            $scope.$watch("w", function (to,from) {    // 监听 宽度
                div.width(to);        // jq改变width()
            });
            $scope.$watch("h", function (to,from) {
                div.height(to);
            });
            $scope.changeSize= function () {           // ng-click 点击事件
                $scope.w +=5;
                $scope.h = parseInt($scope.h)+10;
            }

        }
    </script>
    <p class="page-header">ng-include 注意文件名里面先双引号再单引号</p>
    <div ng-include="'test-header.html'"></div>

   <!-- &lt;!&ndash;选择加载tab&ndash;&gt;
    <div ng-init="url='file.html'">
        <p class="page-header">nav data-toggle="tab" 选项卡点击会改变</p>
        <ul class="nav nav-pills">
            <li class="active"><a ng-click="url='file.html'" data-toggle="tab" href>file</a></li>
            <li><a ng-click="url='edit.html'" data-toggle="tab" href>edit</a></li>
            <li><a ng-click="url='view.html'" data-toggle="tab" href>view</a></li>
        </ul>
        <div ng-include="url"></div>
    </div>-->
    <!--选择加载tab json版-->
    <h1 class="page-header text-primary">选择加载tab json版</h1>
    <div ng-controller="menuContrl">
        <!--{{menus}}-->
        <ul class="nav nav-pills">
            <li ng-repeat="m in menus">
                <a data-url={{m.url}} ng-click="changeUrl($event.target)" data-toggle="tab" href>{{m.title}}</a>
            </li>
        </ul>
        <div ng-include="url"></div>   <!--这里引用-->
    </div>
    <script>
        function menuContrl($scope,$http,$element){
            $http.get("menu.json")
                    .success(function (result) {
                        $scope.menus=result;
                        $scope.url=result[0].url;
                    });
            $scope.changeUrl= function (target) {
//                alert($(target).html());
//                alert($(target).attr("data-url"));   //   alert($(target);获得点击对象的值
                $scope.url=$(target).attr("data-url");
            }
        }
        //为第一个Li 加 样式,不过没效果
        $(".nav li:eq(0)").addClass("active");
    </script>
    <h1 class="page-header text-primary">ng-style</h1>

    <div ng-style="{width:100,height:100,border:'1px solid red'}"></div>
    <hr>
    <div ng-controller="style1">
        <input type="color" ng-model="color">
        <div ng-style="mystyle1"></div>
    </div>
    <script>
        function style1($scope){
            $scope.color="blue";
            $scope.mystyle1={
                width:100,
                height:100,
                border:'1px solid green',
                backgroundColor:$scope.color
            };
            //ng-model 没效果就改成  监听  watch
            $scope.$watch("color", function (to,from) {
                $scope.mystyle1.backgroundColor=$scope.color;
            })
        }
    </script>
    <h1 class="page-header text-primary">ng-class</h1>
    <div>
        也可以改变颜色,参考ng-style
        <div ng-class="'jumbotron'"></div>
    </div>
    <h1 class="page-header text-primary">隔行变色</h1>
    <style>
        .e{color:red;}
        .f{color:blue;}
    </style>
    <div ng-init="l=[1,2,3,4]">
        <ul>
            <li ng-class-even="'e'" ng-class-odd="'f'" ng-repeat="m in l">{{m}}</li>
        </ul>
    </div>
    <h1 class="page-header text-primary">ng-show ng-hide</h1>
    <div ng-init="flag=true">    <!--flag用法 值取反 -->
        <button ng-click="flag=!flag" type="button" class="btn btn-primary">click</button>
        <div ng-show="flag" class="jumbotron">
            welcome
        </div>
    </div>
    <h1 class="page-header text-primary">ng-show2 ng-hide2</h1>
    <div ng-init="flag=true;msg='个性签名'">    <!--flag用法 值取反 -->
        <button ng-show="flag" ng-click="flag=!flag" type="button" class="btn btn-primary">edit</button>
        <button ng-hide="flag" ng-click="flag=!flag" type="button" class="btn btn-primary">submit</button>
        <div ng-show="flag" class="jumbotron">
            {{msg}}
        </div>
        <div ng-hide="flag" class="jumbotron">
            <input type="text" class="form-control" ng-model="msg">
        </div>
    </div>

    <h1 class="page-header text-primary">ng-switch</h1>
    <div ng-init="dow='thur'">
        <ul ng-switch on="dow">
            <li ng-switch-when="sun">星期日</li>
            <li ng-switch-when="sat">星期六</li>
            <li ng-switch-default>工作日</li>
        </ul>
    </div>

</div>
</body>
</html>

menu.json

[
  {"title":"文件","url":"file.html"},
  {"title":"编辑","url":"edit.html"},
  {"title":"视图","url":"view.html"}
]