Saturday, August 19, 2017

Angular 1: Tạo App Hoàn Chỉnh P1 - Cài Đặt Project

1. Những Thứ Cần Cài Đặt
- Ta cài nodejs( từ nodejs ta có thể cài đặt các package khác tử npm(trong nodejs)
- Sau khi đã cài xog nodejs ta mở cmd lên và tiếp tục cài đặt http-server để giả lập localhost server chay ứng dụng của mình.
- Tiếp theo ta cài bower(để quản lí các thư viên javascript)
Vậy là tạm thời ta đã xong phần chuẩn bị các package cần thiết tiếp đến ta tạo cấu trúc cho project của mình.



2. Cấu Trúc Thư Mục App

angular1
app
丨ㅡ asserts
丨        丨― images
丨        丨― languages
丨        丨         丨― en.json
丨        丨         丨― vi.jso
丨        丨― styles
丨        丨         丨― main.css
丨        丨         丨― main.styl
丨― modules
丨        丨― directives
丨        丨― api
丨        丨― common
丨― views
丨― app.js
丨― main.ctrl.js
index.html

bower.json

Ở trên đây là thư mục đơn giản mà ta có thể mở rộng ra, mình ghi chú sơ bộ về file và thư mục chính.
- Project  là tên của ứng dụng mình
  • index.html mình dùng để run ứng dụng của mình lên
  • bower.json chừa tất cả các labrary javascript của mình
  • asserts chứ các image, styles, languages
  • modules chứa các service, factory, directive, provider, api hay common
  • views thì chứ các trang của mình theo từng url
  • app.js là phần chình của mình chứa các config về router, sercurity, global
  • main.ctrl.js là controller chính, các service hay direct sẽ được import trong main.ctrl.js này để tiện quản lí
- Nội dung file index.html  như sau
<!DOCTYPE html>
<html ng-app="App">
<head>
 <title>Angular 1</title>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
 <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css">
 <link rel="stylesheet" type="text/css" href="app/asserts/styles/main.css" />
</head>
<body ng-controller="AppCtrl">

 <div ng-bind="sayHello" class="text-center"></div>

 <script src="bower_components/angular/angular.js"></script>
 <script src="app/app.js"></script>
 <script src="app/main.ctrl.js"></script>
</body>
</html>
- Nội dung của file bower.json như sau.
{
  "name": "angular1",
  "version": "0.0.0",
  "homepage": "https://mhdanh.blogspot.com",
  "authors": [
    "maidanhcongtu@gmail.com"
  ],
  "description": "set up angular1 completely",
  "main": "index.html",
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular": "1.5.5",
    "bootstrap": "3.2.0"
  }
}
Ghi Chú: nội dung này chỉ là config các thư viện và version của nó, để có thê download các thư viện này về ta làm như sau.
mở cmd và trỏ vào thư mục angular1 và chạy lệnh bower install chờ các thư viện được tải về hết là xong.

- Nội dung của file app.js như sau.
(function(){
 "use strict";
 var app = angular.module("App",["MyCtrl"]);
})();
- Nội dung của file main.ctrl.js như sau.
(function(){
 "use strict";
 angular.module("MyCtrl",[])
  .controller("AppCtrl", ["$scope", function($scope){
   $scope.sayHello = "Welcome angular 1";
  }]);
})();

3. Start Http-Server
Mở cmd và trỏ vào thư mục angular1 của chúng ta và thực thi lệnh http-server -a localhost -p 8080 enter. Ta mở trình duyệt lên và truy cập vào đường dẫn http://localhost:8080/ ta sẽ đươc kết quả như hình bên dưới.
Ghi Chú: Trường hợp ta không run được http-server có thể là ta chưa cài nó trên folder angular1, để cài nó ta run lệnh. npm install http-server vậy là được

Ở trên đây là một config rất đơn giản để chạy được với angular 1.

4. Tải code ở đây
https://drive.google.com/open?id=0B-JvPy4-xKqkNlRXM1hWNnJiZ1E

No comments:

Post a Comment