AngularJS

2016-11-22  本文已影响0人  前端混合开发 
{{foo.something.replace("\n","<br>")}}
<br ng-bind-html="foo.something">
</br>

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' + '!'}}

Screen Shot 2016-12-08 at 1.22.59 PM.png

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('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

／***********************华丽丽分割线************************／

<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];
});

----
上一篇 下一篇

猜你喜欢

热点阅读