1.1:简要
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 模块化</title>
</head>
<body>
<!-- 指定模块 -->
<!-- 一个页可以有多个模块,但是不能互想嵌套 -->
<!-- 一般只会有一个 -->
<div class="box" ng-app="App">
<!-- 指定控制器 -->
<div ng-controller="DemoContoller">
<h1>{{name}}在{{school}}学习使用AngularJS</h1>
<ul>
<li ng-repeat="(key, course) in courses">第{{key+1}}天:{{course}}</li>
</ul>
</div>
</div>
<!-- 引入框架 -->
<script src="./libs/angular.min.js"></script>
<script>
// 提供一个全局对象angular,在此对象下有N多方法
// 其中module方法可以帮我们创建一个模块
var App = angular.module('App', []);
// App就是新创建的模块,这个模块又是一个对象
// 在此对象下又有N多方法,可以实现具体业务逻辑
// 其它controller可以创建一个控制器
App.controller('DemoContoller', ['$scope', function ($scope) {
// $scope 是一个空对象{},此对象就是Model
$scope.name = '强';
$scope.school = '北京邮电';
$scope.courses = [
'MVC',
'指令',
'模块化'
]
}]);
</script>
</body>
</html>
2.1演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 模块化</title>
</head>
<body ng-app="Demo">
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody ng-controller="StarsController">
<tr ng-repeat="star in stars">
<td>{{star.name}}</td>
<td>{{star.sex}}</td>
<td>{{star.age}}</td>
</tr>
</tbody>
</table>
<script src="./libs/angular.min.js"></script>
<script>
// 定义一个模块
var Demo = angular.module('Demo', []);
// 定义控制器
Demo.controller('StarsController', ['$scope', function ($scope) {
// $scope 就是 Model 并且空对象
// 后面数据会来自于后端
$scope.stars = [
{name: '刘德华', sex: '男', age: 62},
{name: '王力宏', sex: '男', age: 40},
{name: '周杰伦', sex: '男', age: 39},
{name: '小明', sex: '女', age: 12}
];
}]);
</script>
<!-- 模块 -->
<!-- 每个模块基于MVC -->
</body>
</html>
3.1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 指令</title>
<!-- <link rel="stylesheet" ng-href="{{link}}"> -->
<style>
.red {
color: red;
}
.blue {
color: blue;
}
</style>
</head>
<body ng-app="App">
<ul ng-controller="DemoController">
<li ng-bind="name"></li>
<li>{{name}}</li>
<li ng-show="1">ng-show用来显示或隐藏内容的,当值为true时显示</li>
<li ng-hide="0">ng-hide用来显示或隐藏内容的,当值为true时隐藏</li>
<li ng-if="1">ng-if用来控制元素是否存在,当值为true时存在</li>
<li><img ng-src="{{path}}" alt=""></li>
<li ng-class="{red: true, blue: true}">ng-class指令</li>
<li><input type="text" ng-disabled="0"></li>
<li><input type="text" ng-readonly="1" value="angular"></li>
<li><input type="checkbox" ng-checked="1">男</li>
<li>
<select name="" id="">
<option value="">河北省</option>
<option value="">山东省</option>
<option value="" ng-selected="1">北京市</option>
</select>
</li>
</ul>
<script src="./libs/angular.min.js"></script>
<script>
// 创建模块
var App = angular.module('App', []);
App.controller('DemoController', ['$scope', function ($scope) {
// $scope
$scope.name = 'itcast';
$scope.path = './images/author.jpg';
$scope.link = './main.css';
}]);
</script>
</body>
</html>
3.2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 自定义指令</title>
</head>
<body ng-app="App">
<!-- <div tag></div> -->
<!-- 元素 -->
<!-- <tag></tag> -->
<!-- <div class="tag"></div> -->
<!-- directive:tag -->
<script src="./libs/angular.min.js"></script>
<script>
var App = angular.module('App', []);
// 通过模块实例对象的directive方法可以自定义指令
App.directive('tag', function () {
// 返回一个对象,这个对象就是自定义指令相关的内容
return {
// E element
// A attribute
// C class
// M mark replace 必须为true
restrict: 'ECMA',
// template: '<ul><li>首页</li><li>列表</li></ul>',
templateUrl: './list.html',
// replace: true
}
});
</script>
</body>
</html>
4.1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 数据绑定</title>
</head>
<body ng-app="App">
<ul ng-controller="DemoController">
<li ng-bind="name"></li>
<li ng-cloak>{{name}}{{age}}</li>
<li ng-bind-template="{{name}}{{age}}"></li>
</ul>
<script src="./libs/angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.controller('DemoController', ['$scope', function ($scope) {
// $scope 就是Model
$scope.name = 'itcast';
$scope.age = 10;
}]);
</script>
</body>
</html>
4.2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 数据绑定</title>
</head>
<body ng-app="App">
<div ng-controller="DemoController">
<!-- 要实现数据从视图向模型传递需要借助于表单元素 -->
<input type="text" ng-model="msg">
<h4>{{msg}}</h4>
<button ng-click="show()">显示</button>
</div>
<script src="./libs/angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.controller('DemoController', ['$scope', function ($scope) {
// $scope Model
$scope.show = function () {
alert($scope.msg);
}
}]);
</script>
</body>
</html>
4.3
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
<meta charset="UTF-8">
<title>AngularJS 数据绑定</title>
</head>
<body>
<div ng-controller="DemoController" ng-init="name='itcast';age=10">
<h1>{{name}}</h1>
<h2>{{age}}</h2>
</div>
<script src="./libs/angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.controller('DemoController', ['$scope', function ($scope){
// $scope.name = '';
}])
</script>
</body>
</html>
4.4
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
<meta charset="UTF-8">
<title>AngularJS 数据绑定</title>
<style>
ul {
list-style: none;
}
</style>
</head>
<body>
<div ng-controller="DemoController">
<ul>
<li><button ng-click="single()">单击</button></li>
<li><button ng-dblclick="double()">双击</button></li>
<li><input type="text" ng-blur="blur()"></li>
<li ng-mouseout="mouseout()">一些内容</li>
</ul>
</div>
<script src="./libs/angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.controller('DemoController', ['$scope', function ($scope) {
$scope.single = function () {
alert('我被单击了');
}
$scope.double = function () {
alert('我被双击了');
}
$scope.blur = function () {
alert('失去焦点了');
}
$scope.mouseout = function () {
alert('鼠标移出了');
}
}])
</script>
</body>
</html>
4.5
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
<meta charset="UTF-8">
<title>AngularJS 数据绑定</title>
</head>
<body>
<div ng-controller="DemoController">
<!-- <ul>
<li ng-repeat="(key, star) in stars">{{star.name}}{{star.age}}</li>
</ul> -->
<ul>
<li ng-repeat="item in items" ng-switch="item">
<span ng-switch-when="css">{{item}}</span>
</li>
</ul>
</div>
<script src="./libs/angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.controller('DemoController', ['$scope', function ($scope) {
// $scope.stars = [
// {name: '刘德华', age: 60},
// {name: '周杰伦', age: 38},
// {name: '王力宏', age: 39}
// ]
$scope.items = ['html', 'css', 'js'];
}]);
// switch(name) {
// case '':
// }
</script>
</body>
</html>
5.1
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>AngularJS 根作用域</title>
</head>
<body ng-app="App" ng-init="name='顺治'">
<div class="parent" ng-controller="ParentController">
<h1>{{name}}</h1>
<div class="child" ng-controller="ChildController">
<h2>{{name}}</h2>
</div>
</div>
<script src="./libs/angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.controller('ParentController', ['$scope', function ($scope) {
// $scope.name = '康熙';
}]);
App.controller('ChildController', ['$scope', function ($scope) {
$scope.name = '雍正';
}]);
var name = '小明';
// function () {
// var name = '小红';
// alert(name);
// function () {
// var name = '小黑';
// }
// }
</script>
</body>
</html>