모바일 Angular UI-프로젝트 설정

이 장에서는 프로젝트 설정에 대해 설명합니다. 이 설정을 사용하여 나머지 장의 예제로 작업 할 것입니다.

프로젝트 설정은 필요한 패키지를 쉽게 설치할 수 있으므로 npm을 사용하여 수행됩니다.

명령 프롬프트를 열고 uiformobile /이라는 디렉토리를 만들고 cd 명령을 사용하여 디렉토리를 입력합니다.

이제 다음 명령을 실행하십시오-

npm init

npm init 명령은 proect를 초기화합니다.

아래와 같이 package.json을 생성합니다.

{
   "name": "uiformobile",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC"
}

이제 다음 명령을 실행하여 모바일 각도 UI를 설치하십시오.

npm install --save mobile-angular-ui

Mobile Angular UI로 작업하려면 AngularJS가 필요합니다. 다음 명령을 사용하여 설치하겠습니다.

npm install --save-dev angular

또한 라우팅 작업을 위해 각도 경로가 필요합니다. 그것을 설치하려면 명령은-

npm install --save-dev angular-route

브라우저에서 앱을 실행할 서버가 필요합니다. 우리는 익스프레스를 사용할 것입니다.

Express를 설치하는 명령은 다음과 같습니다.

npm install --save-dev express

루트 폴더 안에 server.js 파일을 만듭니다. 이 파일에는 서버를 시작하는 익스프레스 명령이 있습니다.

다음은 server.js의 세부 사항입니다.

const express=require('express')
const app=express();
const port=3000;
var path=require("path");
app.use("/node_modules", express.static("D:/uiformobile/node_modules"));
app.use("/src", express.static("D:/uiformobile/src/"));
app.use("/src/js", express.static("D:/uiformobile/src/js"));
app.all("/*", function (req, res, next) {
   res.sendFile("index.html", { root: "D:/uiformobile/" });
});
app.listen(port, () => console.log('Starting your Mobile Angular App on port ${port}!'))

서버를 시작하려면 다음 명령을 사용하십시오-

node server.js.

서버는 포트 3000에서 시작합니다. 다음을 사용할 수 있습니다. http://localhost:3000/ 브라우저에서 UI를 볼 수 있습니다.

최종 폴더 구조는 다음과 같습니다.

node_modules / 폴더에는 mobile_angular_ui, angularjs 및 angular-route 용으로 설치된 모든 패키지가 있습니다.

그만큼 src/폴더에는 UI 개발에 필요한 HTML 및 js 파일이 있습니다. index.html은 눌렀을 때 볼 수있는 시작 지점입니다.http://localhost:3000/.

이제 필요한 패키지가 설치되었습니다. 이제 우리가 필요로하는 중요한 css 및 js 파일에 대해 이야기하겠습니다. 프레임 워크는 모바일 애플리케이션을위한 것이지만 데스크톱 앱에도 사용할 수 있습니다.

다음은 .html 파일에 포함되어야하는 중요한 css 파일입니다.

Sr. 아니요	파일 설명
1	mobile-angular-ui-base.css 이 CSS 파일은 모바일 장치 및 태블릿 용입니다.
2	mobile-angular-ui-desktop.css 데스크톱 및 모바일 장치에서 사용하기위한 반응 형 CSS 파일입니다.
삼	mobile-angular-ui-hover.css 여기에는 hover에 대한 CSS 규칙이 있습니다.
4	angular.min.js 프로젝트를 시작하는 데 필요한 AngularJS 파일.
5	mobile-angular-ui.min.js AngularJS 모듈의 종속성 모듈에서 사용해야하는 모바일 각도 UI js 파일입니다. 이것이 핵심 모듈입니다.
6	angular-route.min.js Routing에 사용되는 AngularJS Route 파일입니다.

위의 모든 파일이 내부에 있습니다. node_modules/. 프로젝트 설정이 끝났으므로 이제 다음 장에서이 프로젝트를 사용하여 첫 번째 앱을 개발할 것입니다.