angular入门
2016-04-05 23:14
459 查看
angular入门
angular入门2
angular 入门3 直接把 data-ng-app="" 写到 html 全局 使用angular-1.2.5.js 调用控制器简单点
menu.json
<!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>
<!–单价：{{price}}<br>
数量：{{count}}<br>
合计：{{price*count}}–>
<!–
{{pName}}：{{price}}<br>
{{pCount}}：{{count}}<br>
{{pTotal}}：{{price*count}}
–>
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">
<!-- <!– data-ng-bind 单向绑定 –>
<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">
<!– data-ng-bind 单向绑定 –>
<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>
<!-- <!–选择加载tab–>
<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"}
]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- angularJS中的ui-router和ng-grid模块
- 指令：ng-bind
- 指令：ng-model
- AngularJS
- 常用AngularJs代码段
- 常用AngularJs代码段
- [Angular 2] @ViewChild to access Child component's method
- 学习angular
- AngularJs
- angularjs post /get请求及radio button
- PhpStorm 对 AngularJS 的支持
- AngularJs 实战 -慕课网
- 构建自己的AngularJS - 作用域和Digest（三）
- AngularJS路由实例(uiRoute、ngRoute)
- angular.forEach在调接口中的应用
- AngularJs Scrope
- AngularJs Controllers
- AngularJS ng-model directive
- angularJs小应用----计算购物金额-动态改变邮费
- 初识angularJs