-
AngularJS is rendering
<br>as text not as a newline
I used ng-bind-html
{{foo.something.replace("\n","<br>")}}
<br ng-bind-html="foo.something">
</br>
-
kebab-case
kebab case: e.g. "The-quick-brown-fox-jumps-over-the-lazy-dog" ng-app
CamelCase
"TheQuickBrownFoxJumpsOverTheLazyDog"
1 . The ng-app attribute represents an Angular directive, named ngApp (Angular uses kebab-case for its custom attributes and camelCase for the corresponding directives which implement them). This directive is used to flag the HTML element that Angular should consider to be the root element of our application. This gives application developers the freedom to tell Angular if the entire HTML page or only a portion of it should be treated as the AngularJS application.
Angular expressions are JavaScript-like code snippets that are evaluated by Angular in the context of the current model scope, rather than within the scope of the global context (window
).
e.g. Nothing here {{'yet' + '!'}}
- The injector that will be used for dependency injection is created.
用于依赖注入的注入器将被创建 - The injector will then create the root scope that will become the context for the model of our application.
- Angular will then "compile" the DOM starting at the ngApp root element, processing any directives and bindings found along the way.
injector被创建，然后$rootScope被创建，根元素和绑定的数据就可以被处理了。
For Angular applications, we encourage the use of the Model-View-Controller (MVC) design pattern to decouple the code and separate concerns.
ng-app把view(html)和controller规划到一个app,然后ng-controller表明view绑定的controller是哪一个，从而得到绑定的数据；
data modal 就是$scope定义的变量；比如：
$scope.phones = [
{ name: 'Nexus S',
snippet: 'Fast just got faster with Nexus S.' },
{ name: 'Motorola XOOM™ with Wi-Fi',
snippet: 'The Next, Next Generation tablet.' },
{ name: 'MOTOROLA XOOM™',
snippet: 'The Next, Next Generation tablet.' } ];
Although the controller is not yet doing very much, it plays a crucial role. By providing context for our data model, the controller allows us to establish data-binding between the model and the view.
controller给data modal提供了容器或者说上下文，允许我们在modal和view之间进行数据绑定。
看吧，就像我说的，连接用的：
A scope can be seen as the glue which allows the template, model, and controller to work together.
2 . components
Remember that (since components are also directives) the name of the component is in camelCase(e.g. myAwesomeComponent), but we will use kebab-case(e.g. my-awesome-component) when referring to it in our HTML.
定义的时候用的是camelCase这种方式，使用的时候用的是kebab-case这种方式。
Let's see an example:
angular. module('myApp')
. component('greetUser',
{
template: 'Hello, {{$ctrl.user}}!',
controller: function GreetUserController() { this.user = 'world'; }
});
Now, every time we include <greet-user></greet-user> in our view, Angular will expand it into a DOM sub-tree constructed using the provided template and managed by an instance of the specified controller.
命名注意事项A note on file naming:
It is a good practice to distinguish different types of entities by suffix. In this tutorial, we are using the .component suffix for components, so the definition of a someComponent component would be in a file named some-component.component.js
- $state.go()强制刷新页面方法：
定义的时候：
.state('test', { url: '/test',
cache:'false',
params:{bio:null},
templateUrl: 'templates/test.html',
controller: 'testCtrl' })
.state('test', {
url: '/test',
cache:'false',
params:{bio:null},
views:{
'main':{
templateUrl: 'templates/test.html',
controller: 'testCtrl'
} })
3 . phone list的结构：
app/
│
└─phone-list/
│ │─ phone-list.component.js
│ │─ phone-list.component.spec.js
│ │─ phone-list.module.js
│ └─ phone-list.template.html
└───app.css
│
└───app.module.js
│
└───index.html
4 . dependency injection (DI)
相对路径： (the URL is relative to our index.html file).
get data from Json file:
$http.get('phones/phones.json')
.then(function(response) { self.phones = response.data; });
$http makes an HTTP GET request to our web server, asking for phones.json(the URL is relative to our index.html file). The server responds by providing the data in the JSON file. (The response might just as well have been dynamically generated by a backend server.
The $http service returns a promise object, which has a then() method.
We call this method to handle the <u>asynchronous response 异步响应</u> and assign the phone data to the controller, as a property called phones
.
5 . JAVA
src/
└─resource/
│ │
└─login.properties
└─com/
│
└─makanet/
│
└─project/
│
└─util/
│─ Constants.java
│─ Initializer.java
└─ HttpRequests.java
Constants.java如下定义：
public class Constants{
public static String COMPANY = "Makanet";
public static String SERVER = "";
}
如果想要在Initializer.java用Constants.java中的常量，需要在Initializer.java引入这个文件
import com.makanet.project.util.Constants;
public class Initializer{
public void init(){
//直接用Constants.COMAPYNAME;
//也可以初始化Constants中的值：
Constants.SERVER = "http://localhost:8000";
}
}
6 . components
7 . components
8 . components
／***********************华丽丽分割线************************／
-
AngularJS中transclude用法:
Transclude - 在Angular的指令中，大家会看到有一个这样的一个配置属性，这个单词在英文字典里面也查询不到真实的意思，所以就用英文来标示它吧。如果你深入的使用angular的话，你就花很大一部分时间来创建自定义指令，那么就不可避免的要深入理解transclude。简单的讲，transclude主要完成以下工作，取出自定义指令中的内容(就是写在指令里面的子元素)，以正确的作用域解析它,然后再放回指令模板中标记的位置(通常是ng-transclude标记的地方)，虽然使用内建的ngTransclude对于基本的transclude操作已经足够简单，但是在文档中对这个transclude的解释还是有存在很多疑惑，比如说：
在fiddle中查看例子：http://jsfiddle.net/ospatil/A969Z/157/我用到的是，在做directive时，如果想把数据放到directive的某个元素里，就需要用到transclude了。
ng-bind和ng-model的不同
<div ui-view="editBio"></div>
.state('editProfile',{
url:'/editProfile',
views:{
'main':{
templateUrl:'templates/ views/editProfile.html',
controller:'EditProfileController'
}
}
}) .state('editBio',{
url:'/editBio',
params:{bio:null
},
views:{
'main':{
templateUrl:'templates/ views/editBio.html',
controller:'EditBioController'
}
}
})
- common(文件夹)
- js(文件夹)
- routes.js
- controllers(文件夹)
- constants.js
- templates(文件夹)
- css(文件夹)
- fonts(文件夹)
- images(文件夹)
- libs(文件夹)
- index.js
----
constants.js:
angular.module('com.companyName.projectName.constants',[])
.constant('CONSTANTS',{
MENU_COLORS:['menu-color-white','menu-color-blue','menu-color-red','menu-color-green']
});
CSS:
.menu-color-white {
color: white;
}
.menu-color-blue {
color: blue;
}
.menu-color-red {
color: red;
}
.menu-color-green {
color: green;
}
Controller.js:
angular.module('com.companyName.projectName.constants')
.controller('ControllerName',function($scope, $rootScope, CONSTANTS){
$scope.backgroundColor = CONSTANTS.MENU_COLORS[0];
});
----