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"}
]

angular入门的更多相关文章

  1. Angular入门笔记

    AngularJS(下面简称其为ng)是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足,其通过使用指令(directives)结构来扩展HTML词汇,使开发 ...

  2. angular入门一之环境安装及项目创建

    angular入门一之环境安装及项目创建 1.安装node.js 下载,安装,在终端测试安装是否成功:node -v(查看nodejs版本) npm -v(查看npm版本) 下载地址:https:// ...

  3. 中文代码示例之Angular入门教程尝试

    原址: https://zhuanlan.zhihu.com/p/30853705 原文: 中文代码示例教程之Angular尝试 为了检验中文命名在Angular中的支持程度, 把Angular官方入 ...

  4. 2017-11-07 中文代码示例之Angular入门教程尝试

    "中文编程"知乎专栏原址 原文: 中文代码示例教程之Angular尝试 为了检验中文命名在Angular中的支持程度, 把Angular官方入门教程的示例代码中尽量使用了中文命名. ...

  5. Angular入门篇高速开发导航网

    简单介绍 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式.这样的方式能够让你扩展HTML的语法.以弥补在构建动态WEB应用时静态文本的不足.从而在web应用程 ...

  6. Angular入门到精通系列教程（4）- 开发环境搭建以及入手项目

    1. 本地开发环境搭建 1.1. node.js 1.2. Angular CLI 2. 开发工具 - Visual Studio Code 第一个Anuglar项目 创建第一个anuglar项目 A ...

  7. Angular入门到精通系列教程（6）- Angular的升级

    1. 摘要 2. https://update.angular.io/ 3. 总结 环境: Angular CLI: 11.0.6 Angular: 11.0.7 Node: 12.18.3 npm ...

  8. Nodejs之MEAN栈开发（五）---- Angular入门与页面改造

    这个系列一共会涉及两个JavaScript框架的讲解,一个是Express用做后端,一个是Angular用于前端.和Express一样,Angular分离内容,处理视图.数据和逻辑.和MVC模式很相似 ...

  9. Angular 入门学习

    1.Hello World 入门 源代码 <!doctype html> <html ng-app> <head> <script src="htt ...

随机推荐

  1. 17.2---#字棋（CC150）

    牛客网的在线题.思路,比较简单.就是判断一下是否有连起来的1. public static boolean checkWon(int[][] board){ boolean res = false; ...

  2. 转：shell杀死指定名称的进程

    #!/bin/sh #根据进程名杀死进程 ] then echo "缺少参数:procedure_name" exit fi PROCESS=`|grep -v grep|grep ...

  3. [k]自定义上传文件按钮样式

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Alien Dictionary

    There is a new alien language which uses the latin alphabet. However, the order among letters are un ...

  5. sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback

    sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback在sharepoint 2010中,如果当前页面的篇幅 ...

  6. Android常用控件

     Android 中使用各种控件(View) DatePicker - 日期选择控件 TimePicker - 时间选择控件 ToggleButton - 双状态按钮控件 EditText - 可编辑 ...

  7. linux自动定时备份web程序和mysql数据库

    前些天受朋友说linux定时备份不知道怎么搞,叫帮忙处理一下.由于这段时间正闲着,所以也就欣然答应.由于朋友对linux不懂也希望我将操作的过程记录下来,也就是越详细越好.所以写得比较$%^& ...

  8. zju3430

    题意:给出多个加密的模式串,和多个待匹配的串,问每个串里出现了多少种模式串.加密方法是把每3bytes加密成按6bits一个对应成4个字符,对应方法题里给了. 分析:除了解密之外,基本是个赤裸裸的AC ...

  9. iOS UILocalNotification 每2周，每两个月提醒

    iOS 的UILocalNotification提醒提供了默认的重复频率,比如,一天,一个星期等等,但是对于非标准的频率,比如每,2周,每2个月,无法重复提醒. 我们的思路是在应用程序开始时,把即将发 ...

  10. java web 学习 --第二天（Java三级考试）

    第一天的学习在这http://www.cnblogs.com/tobecrazy/p/3444474.html 2.jsp 基础知识 Jsp页面中的Java脚本主要有3部分:声明(Declaratio ...