Begin with Angular

用intellij+angular写一个index.html

  • Greate a static web project by intellij
1.png
  • use ** cd IdeaProjects/test ** go to the project directory which u created
2.png
  • use ** npm init ** to initialize the project. It will creat a ** package.json ** file to record the dependencies of this project. Just press the ** return ** to create a default package.json file.
3.png

now check ur project in Intellij, the package.json is already there.


4.png
  • If u use the git as a VCS, u can use ** vim .gitignore ** to add the ignore file which used to tag the files and directories which u don't want to sync or commit. (usually some config files or libraries)


    5.png

now back to Intellij, if u not plugin the .ignore in ur Intellij u'd better install it (the Intellij will remind u to install .ignore just follow the hint). U can also press ** command + , ** to open the preference then ** -> plugins -> Browse repositories... -> search ".ignore" -> install ** to install the plugin.


6.png
  • then use ** npm install angular ** to add the angular into project


    7.png

now back to intellij the ** angular.js ** is contented in the ** node_modules **


8.png
  • then add a html file to the project and name it as ** index **
    copy following code into the index.html
<html ng-app>
<head>    
  <script src="node_modules/angular/angular.min.js"></script></head>
<body>
  <div>
    <label>NameNameName:</label>    
    <input type="text" ng-model="yourName" placeholder="Enter a name here">    
    <hr>    
    <h1>Hello {{yourName}}!</h1>
  </div>
</body>
</html>
  • then use ** http-server ** to start the http server


    9.png

then open ur Browser and type ** localhost:8080 ** in the url to check ur first angular html.


10.png

Congratulations ! now u can write any code ur learned from angular.js !

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容