当前位置： 移动技术网 > IT编程>开发语言>JavaScript > AngularJS 2.0 尝鲜

AngularJS 2.0 尝鲜

2017年12月21日  | 移动技术网IT编程  | 我要评论

Angular 2.0 目前还处在制定完善中，尚未正式发布。

本文通过AngularJS官网的一个例子，介绍AngularJS的一些新特性、新写法（这些内容到正式发布时可能会有改动）。

 

（1）创建一个Angular 2工程目录， 如创建一个文件夹并命名为angular2

 

（2）从GitHub repository上clone一份项目种子，该种子提供了快速开发所需的资源，包括Angular 2及其依赖

 

git clone https://github.com/angular/quickstart.git


 

（3）在工程目录根路径下，创建两个文件分别为和app.es6

扩展名".es6"表示该文件采用ES6语法的意思。

 

在app.es6文件里，导入Angular所需的相关模块：

 

import {Component, Template, bootstrap} from 'angular2/angular2';

上述语句使用的是ES6的模块语法，用以导入Angular的三个模块。这些模块将在运行时加载。

 

 

（4）定义component

 

@Component({
    selector: 'my-app'
})
@Template({
    inline: '
Hello {{ name }} ' }) class MyAppComponent { constructor() { this.name = 'winstar'; } }
由示例代码可以看出， 一个component由两部分组成：标注部分和component控制器（controller）部分。

 

 

（5）启动引导程序

 

bootstrap(MyAppComponent);

在app.es6的底部，调用bootstrap()方法将新定义的component加载到页面。

 

 

（6）声明HTML

 




<script src="/winstar/angular2/quickstart/dist/es6-shim.js"></script> <script> System.paths = { 'angular2/*': '/winstar/angular2/quickstart/angular2/*.js', 'rtts_assert/*': '/winstar/angular2/quickstart/rtts_assert/*.js', 'app': 'app.es6' }; System.import('app'); </script>




 


（7）运行查看效果


运行本地的HTTP服务器，然后在浏览器中查看效果


 

						

                    

                        

                            
                        

                    

                    


                    
                    

                        
    
                            
  • 
                                
                            
    • 
                        

                    


                    
                    

                    

                        
您可能感兴趣的文章:

                        
                    

                    

                        如对本文有疑问，
                        点击进行留言回复！！
                    

                


                

                

                    
相关文章:

                    
                

               
                       
                             

                

                    
                    

                        
                        
                        

                        

                            

                                
                                    
                                
                                 
                                    
                                
                            

                            

                                验证码：
                                
                                    
                                    
                                    
                                
                            

                        

                        
                    

                    
                    

                        
                        
                        
                    

                

            

        

        
        
 
            

                

                    
                    

                    
                


                

                    

                        

                            
最近更新的文章

                            

                                
                            

                        

                    

                


                

                    
                    

                        
                    

                


                

                

                    

                        

                            
大家感兴趣的文章

                            

                                
                            

                        

                    

                

                

                    
                    

                        
                    

                


            

        

    



 


 
 

     
    

        

移动技术网