How to create a new angularjs project based on WebStorm

最新推荐文章于 2023-11-17 11:45:14 发布

qwfys200

最新推荐文章于 2023-11-17 11:45:14 发布

阅读量142

点赞数

分类专栏： JavaScript 文章标签： angularjs webstorm

知识在分享中升华，思想在交流中沉淀。

本文链接：https://blog.csdn.net/qwfys200/article/details/114086167

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

How to create a new angularjs project based on WebStorm

Create a empty project
Install bower
Initialize the project based on bower
Git
Others
Install angular
run

Create a empty project

在这里插入图片描述

add file .gitignore

echo ".idea" > .gitignore

Install bower

sudo cnpm install -g bower

Initialize the project based on bower

harbin@shangluo:~/Public/project/lanzhou/angular-start$ bower init
? name angular-start
? description How to start a learning journey about angular
? main file index.html
? keywords 
? authors lwk <qwfys200@qq.com>
? license MIT
? homepage https://blog.csdn.net/qwfys200
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? Yes

{
  name: 'angular-start',
  authors: [
    'lwk <qwfys200@qq.com>'
  ],
  description: 'How to start a learning journey about angular',
  main: 'index.html',
  license: 'MIT',
  homepage: 'https://blog.csdn.net/qwfys200',
  private: true,
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

? Looks good? Yes
harbin@shangluo:~/Public/project/lanzhou/angular-start$

harbin@shangluo:~/Public/project/lanzhou/angular-start$ ll
total 24
drwxrwxr-x  4 harbin harbin 4096 Feb 25 15:56 ./
drwxrwxr-x 19 harbin harbin 4096 Feb 25 15:33 ../
-rw-rw-r--  1 harbin harbin  355 Feb 25 15:56 bower.json
-rw-rw-r--  1 harbin harbin    6 Feb 25 15:51 .gitignore
drwxrwxr-x  2 harbin harbin 4096 Feb 25 15:39 .idea/
drwxrwxr-x  5 harbin harbin 4096 Feb 25 15:36 public/
harbin@shangluo:~/Public/project/lanzhou/angular-start$

harbin@shangluo:~/Public/project/lanzhou/angular-start$ cat bower.json 
{
  "name": "angular-start",
  "authors": [
    "lwk <qwfys200@qq.com>"
  ],
  "description": "How to start a learning journey about angular",
  "main": "index.html",
  "license": "MIT",
  "homepage": "https://blog.csdn.net/qwfys200",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}
harbin@shangluo:~/Public/project/lanzhou/angular-start$

add README.md file

echo '# angular-start' > README.md

Git

git init

git init

git remote add

git remote add orgin git@gitee.com:ab-sample/angular-start.git

git add .
git commit -m 'init repository'
git push orgin master

Others

add file .bowerrc

tee .bowerrc <<-'EOF'
{
  "directory": "public/components"
}
EOF

Install angular

harbin@shangluo:~/Public/project/lanzhou/angular-start$ bower install angular#1.4.6 --save
bower angular#1.4.6             cached https://github.com/angular/bower-angular.git#1.4.6
bower angular#1.4.6           validate 1.4.6 against https://github.com/angular/bower-angular.git#1.4.6
bower angular#1.4.6            install angular#1.4.6

angular#1.4.6 public/components/angular
harbin@shangluo:~/Public/project/lanzhou/angular-start$

harbin@shangluo:~/Public/project/lanzhou/angular-start$ tree public/
public/
├── components
│   └── angular
│       ├── angular-csp.css
│       ├── angular.js
│       ├── angular.min.js
│       ├── angular.min.js.gzip
│       ├── angular.min.js.map
│       ├── bower.json
│       ├── index.js
│       ├── package.json
│       └── README.md
├── css
├── img
└── js

5 directories, 9 files
harbin@shangluo:~/Public/project/lanzhou/angular-start$

harbin@shangluo:~/Public/project/lanzhou/angular-start$ cat bower.json 
{
  "name": "angular-start",
  "authors": [
    "lwk <qwfys200@qq.com>"
  ],
  "description": "How to start a learning journey about angular",
  "main": "index.html",
  "license": "MIT",
  "homepage": "https://blog.csdn.net/qwfys200",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular": "1.4.6"
  }
}
harbin@shangluo:~/Public/project/lanzhou/angular-start$

add ./public/index.html

tee ./public/index.html <<-'EOF'
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>学习AngularJS 1.x</title>
</head>
<body>

</body>
</html>
EOF

引入angular.js

tee ./public/index.html <<-'EOF'
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>学习AngularJS 1.x</title>    
</head>
<body>
    <script type="text/JavaScript" src="components/angular/angular.js"></script>
</body>
</html>
EOF

hello world

tee ./public/index.html <<-'EOF'
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>学习AngularJS 1.x</title>
</head>
<body ng-app="">
    <h1>{{"Hello World!"}}</h1>
    <script type="text/JavaScript" src="components/angular/angular.js"></script>
</body>
</html>
EOF