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. 在Navicat for MySQL中打开视图时，提示视图没有主键的问题

    一直把视图理解为一个select语句而已,视图一般就是用于查询,不会通过视图来更新表或视图本身的数据,所以视图根本不需要什么主键.今天自己建了一个视图view_test: drop view if e ...

  2. 统计代码git提交的行数

    $ git log --author="$(git config --get user.name)" --pretty=tformat: --numstat | gawk '{ a ...

  3. silverlight 获取服务器上图片出现异常 “AG_E_NETWORK_ERROR”

    前言 之前项目一直是发布在IIS上面使用HTTP访问,现在要求改为HTTPS,通过在IIS生成自签名后,打开HTTPS通道,可以将原来的程序已HTTPS的方式发布出来. 可参见 http://blog ...

  4. 第三方登录（QQ登录）开发流程详解

    原文:http://www.cnblogs.com/it-cen/p/4338202.html 近排由于工作的繁忙,已经一个星期没写博文做分享了,接下来我对网站接入第三方登录----QQ登录的实现逻辑 ...

  5. Walls and Gates

    You are given a m x n 2D grid initialized with these three possible values. -1 - A wall or an obstac ...

  6. Unity3d 制作物品平滑运动

    直接贴代码了 using UnityEngine; using System; using System.Collections; using System; using DataTable; pub ...

  7. Java中的Comparable接口和Comparator接口

    Comparator位于包java.util下,比较器,是在集合外部定义排序.Comparable位于包java.lang下,代表当前对象可比较的,是在集合内部实现排序. Comparable代表一个 ...

  8. HDU 1000 & HDU1001 & 字符串连接

    A + B Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  9. Xcode添加注释

    VVDocumenter-Xcode,自动生成注释,感觉比较方便的插件,分享下,应该很多人都知道= = 在 https://github.com/onevcat/VVDocumenter-Xcode  ...

  10. 细谈CSS布局方式

    一.CSS布局方式分类 [1].默认文档流方式:以默认的html元素的结构顺序显示 [2].浮动布局方式:通过设置html的float属性显示,值:none不浮动.left对象向左浮动,而后面的内容流 ...