Skip to content

Commit ca34389

Browse files
yyhsongyyhsong
committed
优化目录结构
1 parent 41e44ac commit ca34389

File tree

10 files changed

+194
-9
lines changed

10 files changed

+194
-9
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
.project
1+
.project
2+
test.html

‎app/app.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ angular.module("voteApp").config(["$routeProvider", function($routeProvider) {
77
templateUrl: "tmpl/player/list.html",
88
controller: playerListCtrl
99
}).when("/player/:playerId", {
10-
templateUrl: "tmpl/player/detail.html",
11-
controller: playerDetailCtrl
10+
templateUrl: "tmpl/player/view.html",
11+
controller: playerViewCtrl
1212
}).when("/player/:playerId/:playerName", {
13-
templateUrl: "tmpl/player/detail.html",
14-
controller: playerDetailCtrl
13+
templateUrl: "tmpl/player/view.html",
14+
controller: playerViewCtrl
1515
}).otherwise({
1616
redirectTo: "/player/list"
1717
});

‎app/controllers/voteController.js renamed to ‎app/controller/voteControllers.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ function playerListCtrl($scope, $http) {
77
}
88

99
//Detail Controller
10-
function playerDetailCtrl($scope, $http, $routeParams) {
10+
function playerViewCtrl($scope, $http, $routeParams) {
1111
$http.get("data/players.json").success(function(data) {
1212
var i = parseInt($routeParams.playerId)-1;
1313
$scope.player = data[i];

‎directive.html

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
3+
<html ng-app="myApp">
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
7+
<title>Directive - AngularJS Test</title>
8+
<style type="text/css">
9+
.test-div {margin:15px;padding:15px;border:1px solid #ccc;}
10+
</style>
11+
</head>
12+
<body>
13+
<div class="test-div">
14+
<ul ng-init="users=[{firstName:'Neo',lastName:'Huang'},{firstName:'Shelly',lastName:'Lee'}]">
15+
<li ng-repeat="user in users">
16+
{{user.firstName + " " + user.lastName}}
17+
</li>
18+
</ul>
19+
</div>
20+
21+
<div class="test-div">
22+
<my-test-directive></my-test-directive>
23+
</div>
24+
25+
<div class="test-div">
26+
<p my-test-directive></p>
27+
</div>
28+
29+
<div class="test-div">
30+
<p class="my-test-directive"></p>
31+
</div>
32+
33+
<div class="test-div">
34+
<!-- directive: my-test-directive -->
35+
</div>
36+
37+
<script type="text/javascript" src="static/js/angular-1.5.8.js"></script>
38+
<script type="text/javascript">
39+
/**
40+
* AngularJS lets you extend HTML with new attributes called Directives.
41+
* AngularJS has a set of built-in directives which offers functionality to your applications.
42+
* AngularJS also lets you define your own directives.
43+
* AngularJS directives are extended HTML attributes with the prefix ng-
44+
*/
45+
46+
/**
47+
* Common Built-in Directives:
48+
* ng-app
49+
* ng-init
50+
* ng-bind
51+
* ng-controller
52+
* ng-model
53+
* ng-repeat
54+
* ng-click
55+
* ng-src
56+
* ...
57+
*/
58+
59+
/**
60+
* Create New Directive:
61+
* New directives are created by using the .directive function.
62+
* When naming a directive, you must use a camel case name, myTestDirective,
63+
* but when invoking it, you must use - separated name, my-test-directive
64+
*/
65+
66+
/**
67+
* Invoke a directive by using:
68+
* E: Element name
69+
* A: Attribute
70+
* C: Class
71+
* M: Comment
72+
*/
73+
74+
var myApp = angular.module("myApp", []);
75+
myApp.directive("myTestDirective", function() {
76+
return {
77+
restrict: "A", //default: EA
78+
//replace: true, //false: the comment would be invisible
79+
template: "<h3>Hello Directive</h3>"
80+
};
81+
});
82+
</script>
83+
</body>
84+
</html>

‎expression.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
3+
<html ng-app="">
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
7+
<title>Expression - AngularJS Test</title>
8+
<style type="text/css">
9+
.test-div {margin:15px;padding:15px;border:1px solid #ccc;}
10+
</style>
11+
</head>
12+
<body>
13+
<div class="test-div" ng-init="bgColor='lightblue'">
14+
<input type="text" style="background-color:{{bgColor}}" ng-model="bgColor" value="{{bgColor}}" />
15+
</div>
16+
17+
<div class="test-div" ng-init="num1=2;num2=5">
18+
<p>积：{{num1 * num2}}</p>
19+
<p>和：<span ng-bind="num1 + num2"></span></p>
20+
</div>
21+
22+
<div class="test-div" ng-init="firstName='Neo';lastName='Huang'">
23+
<p>FullName: {{firstName + " " + lastName}}</p>
24+
<p>FullName: <span ng-bind="firstName + ' ' +lastName"></span></p>
25+
</div>
26+
27+
<div class="test-div" ng-init="user={userName:'Neo',age:32}">
28+
<p>User: {{user.userName}}</p>
29+
<p>Age: <span ng-bind="user.age"></span></p>
30+
</div>
31+
32+
<div class="test-div" ng-init="colors=['red','green','blue']">
33+
<p>The first color is {{colors[0]}}</p>
34+
<p>The last color is <span ng-bind="colors[2]"></span></p>
35+
</div>
36+
37+
<script type="text/javascript" src="static/js/angular-1.5.8.js"></script>
38+
<script type="text/javascript">
39+
//Angular表达式基本形式：{{expression}} or ng-bind="expression"
40+
//与JS表达式相似，Angular表达式可以包含文本、操作符和变量
41+
//Angular Number,String,Object,Array like JS
42+
//Angular表达式可以写在页面任何地方，Angular对其进行解析并返回结果
43+
//Angular表达式支持过滤（Filter）,但不支持条件、循环和异常处理
44+
//初始化变量通常放在Controller中，而不是使用ng-init指令
45+
</script>
46+
</body>
47+
</html>

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,6 @@
2020
<script type="text/javascript" src="static/js/angular-1.5.8.js"></script>
2121
<script type="text/javascript" src="static/js/angular-route.js"></script>
2222
<script type="text/javascript" src="app/app.js"></script>
23-
<script type="text/javascript" src="app/controllers/voteController.js"></script>
23+
<script type="text/javascript" src="app/controller/voteControllers.js"></script>
2424
</body>
2525
</html>

‎injector.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<head>
55
<meta charset="utf-8" />
66
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
7-
<title>Dependency Injector</title>
7+
<title>Dependency Injector - AngularJS Test</title>
88
</head>
99
<body>
1010
<div ng-controller="AppController">
@@ -19,6 +19,7 @@ <h3>Module Message: </h3>
1919

2020
<script type="text/javascript" src="static/js/angular-1.5.8.js"></script>
2121
<script type="text/javascript">
22+
//依赖注入
2223
var myMod = angular.module("myMod", []);
2324
myMod.value("modMsg", "Hello from Module");
2425
myMod.controller("ModController", ["$scope", "modMsg", function($scope, msg) {

‎module.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
3+
<html ng-app="myApp">
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
7+
<title>Module - AngularJS Test</title>
8+
<style type="text/css">
9+
.test-div {margin:15px;padding:15px;border:1px solid #ccc;}
10+
</style>
11+
</head>
12+
<body>
13+
<div class="test-div" ng-controller="myCtrl">
14+
<p>
15+
FullName:
16+
{{firstName + " " + lastName}}
17+
</p>
18+
</div>
19+
20+
<div class="test-div" my-directive="">
21+
22+
</div>
23+
24+
<script type="text/javascript" src="static/js/angular-1.5.8.js"></script>
25+
<script type="text/javascript">
26+
/*
27+
* An AngularJS module defines an application.
28+
* The module is a container for the different parts of an application.
29+
* The module is a container for the application controllers.
30+
* Controllers always belong to a module.
31+
*/
32+
33+
//Create a Module
34+
//The [] parameter in the module definition can be used to define dependent modules.
35+
//Without the [] parameter, you are not creating a new module, but retrieving an existing one.
36+
var myApp = angular.module("myApp", []);
37+
38+
//Create a Controller
39+
myApp.controller("myCtrl", function($scope) {
40+
$scope.firstName = "Neo";
41+
$scope.lastName = "Huang";
42+
});
43+
44+
//Create a Directive
45+
myApp.directive("myDirective", function() {
46+
return {
47+
template: "I was created in directive constructor!"
48+
};
49+
});
50+
</script>
51+
</body>
52+
</html>

‎tmpl/player/list.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
</tr>
2929
</thead>
3030
<tbody>
31-
<tr ng-repeat="player in players | filter:queryVal | orderBy:orderProp">
31+
<tr ng-repeat="player in players | filter:queryVal | orderBy:orderProp:true">
3232
<td><img ng-src="static/img/players/{{player.thumb}}" class="pure-img" /></td>
3333
<td><a href="#/player/{{player.id}}">{{player.name}}</a></td>
3434
<td>{{player.position}}</td>

‎tmpl/player/detail.html renamed to ‎tmpl/player/view.html

File renamed without changes.

0 commit comments

Comments
 (0)