美文网首页我爱编程
Begin with Angular

Begin with Angular

作者: George_Zeng | 来源:发表于2016-12-12 23:38 被阅读0次

    用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 !

    相关文章

      网友评论

        本文标题:Begin with Angular

        本文链接:https://www.haomeiwen.com/subject/zwjvmttx.html