-
angularjs內置指令，共63個
查看全部 -
scope綁定策略
查看全部 -
指令內部：scope 創建故里作用域? controller 暴露一組方法給外部調用?
link 處理內部
require的作用（指令之間的關系），引入依賴父指令，引入的父級指令作用域即為當前指令link函數的第四個參數：supermanCtrl；通過supermanCtrl作用域即可調用父級指令內部controller函數暴露出的函數（API）。
require 表示依賴。在使用 require('^superman')<br> 后 ng 會自動把 superman 的 controller 注入到 link 函數的第四個參數里。（controller 就是我們之前在 superman 指令里寫的 controller）
查看全部 -
compile與link
查看全部 -
依賴注入和控制反轉是對同一件事情的不同描述，從某個方面講，就是它們描述的角度不同。依賴注入是從應用程序的角度在描述，可以把依賴注入描述完整點：應用程序依賴容器創建并注入它所需要的外部資源；而控制反轉是從容器的角度在描述，描述完整點：容器控制應用程序，由容器反向的向應用程序注入應用程序所需要的外部資源。
查看全部 -
$scop生命周期
查看全部 -
神奇的$scope
查看全部 -
Controller使用注意
查看全部 -
前端MVC的困難
查看全部 -
為什么要MVC? 為了模塊化和復用
查看全部 -
html和js,MVC的視頻案例
<!DOCTYPE HTML>
<html ng-app="HelloAngular">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="js/bootstrap/bootstrap/css/bootstrap.min.css" />
<script src="js/angular-1.3.0.js"></script>
<script src="HellowAngular.js"></script>
<style type="text/css">
.show-scope-demo .ng-scope,.show-scope-demo .ng-scope {
border: 1px solid #2196f3;
margin: 3px;
}
</style>
</head>
<body>
<div>
<!-- 生產數據模型demo.text,掛在根目錄,在ng-app下任意地點都可以調用 -->
<input ng-model="demo.text"/>
<!-- 取值表達式 -->
<p>{{demo.text}},hello!</p>
</div>
<p>{{demo.text}}</p>
<!-- 方法的綁定 -->
<div ng-controller="angularFunction">
<p>{{greeting.text}},angular-function</P>
</div>
<!-- 自定義標簽,Angular的view試圖 -->
<hello></hello>
<!-- 事件和 不同controller之間方法的調用 -->
<div ng-controller="rootController">
<div ng-controller="controller1">
<p>{{greeting1.text}},controller1!</p>
<button ng-click="text1()">text1</button>
</div>
<div ng-controller="controller2">
<p>{{greeting2.text}},controller2</p>
<button ng-click="text2()" type="button" >text2</button>
</div>
<!-- 兩個控制器可以調用通同一個方法 -->
<button ng-click="rootText()" type="button" class="btn btn-primary btn-xs">rootText</button>
</div>
<!-- 作用域和for in -->
<div class="show-scope-demo" >
<div ng-controller="greetingCtrl">
<p>{{name}}</p>
</div>
<div ng-controller="listCtrl">
<div ng-repeat="name in names">
遍歷:{{name}},根節點數據:{{department}}!<!-- 在最內層獲取不到一個屬性會依次向上去找
和js的原型查找一樣 -->
</div>
</div>
</div>
<span>這是無關的Angular的標簽!</span>
<!-- angular的事件機制 -->
<div ng-controller="EventController">
Root scope
<tt>MyEvent</tt>count : {{count}}
<ul>
<!-- ng-repeat="i in [1]" 內聯機制 -->
<li ng-repeat="i in [1]" ng-controller="EventController">
<!-- 向上傳播事件 -->
<button type="button" ng-click="$emit('MyEvent')">$emit('MyEvent')</button>
<!-- 向下傳播事件 -->
<button type="button" ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button>
<br/>
Middle scope
<tt>MyEvent</tt> count: {{count}}
<ul>
<li ng-repeat="itme in [1,2]" ng-controller="EventController">
Leaf scope
<tt>MyEvent</tt> count: {{count}}
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
var myModel = angular.module("HelloAngular",[]);
myModel.controller("angularFunction",['$scope',
function angularFunction($scope){
$scope.greeting = {
text:"HelloWord-Angular"
};
}
]);
myModel.directive('hello',function(){
return{
restrict: 'E',
? ? ? ? template: '<div>Hi everyone!</div>',
? ? ? ? replace: true
}
});
myModel.controller("rootController",['$scope',
function rootText($scope){
$scope.rootText = function(){
alert("rootText!");
};
}
]);
myModel.controller("controller1",['$scope',
function($scope){
$scope.greeting1 = {
text : "controller1"
};
$scope.text1 = function(){
alert("controller1");
}
}
]);
myModel.controller("controller2",["$scope",
function text2($scope){
$scope.greeting2 = {
text : "controller2"
};
$scope.text2 = function(){
alert('controller2');
};
}
]);
myModel.controller("greetingCtrl",["$scope","$rootScope",
function($scope,$rootScope){
$scope.name = "張三";
$rootScope.department = "不同Controller共用的作用域";
}
]);
myModel.controller("listCtrl",["$scope",
? ? function($scope){
$scope.names = ['張三','李四','王五'];
}
]);
myModel.controller("EventController",["$scope",
function($scope){
$scope.count = 0;
$scope.$on("MyEvent",function(){
$scope.count++;
});
angular.element($0).scope();//調試
}
]);
查看全部 -
版本管理工具--git小烏龜
查看全部 -
版本管理工具msysgit
查看全部 -
前端需要的開發工具：
查看全部 -
ng，一切都是從模塊開始的，即Module.
學了了指令directive
ng-app在任何一個頁面應用中只能出現一次
查看全部
舉報