모바일 Angular UI-나의 첫 번째 앱

이 장에서는 모바일과 데스크톱에서 실행되는 첫 번째 앱을 만들 것입니다.

이전 장에서 만든 프로젝트 설정은 다음과 같은 구조를 가지고 있습니다.

uiformobile/
   node_modules/
   src/
   package.json
   index.html

단계에 따라 Mobile Angular UI를 사용하여 간단한 UI를 빌드합니다.

1 단계

아래와 같이 html 헤드 섹션에 다음 CSS 파일을 추가하십시오.

<!-- Required for desktop -->
<link rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />

<!-- Mandatory CSS -->
<link rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />

<!-- Required for desktop -->
<link rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />

다음으로 js 파일을 추가하십시오-

<script src="/node_modules/angular/angular.min.js"></script>
<script src="/node_modules/angular-route/angular-route.min.js"></script>
<script src="/node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>

index.html 파일은 다음과 같습니다.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>My App</title>
      <!-- Required for desktop -->
      <link rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />

      <!-- Mandatory CSS -->
      <link rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />

      <!-- Required for desktop -->
      <link rel="stylesheet" href="/node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
      <script src="/node_modules/angular/angular.min.js"></script>
      <script src="/node_modules/angular-route/angular-route.min.js"></script>
      <script src="/node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
   </head>
   <body>
   </body>
</html>

2 단계

모바일 앵귤러 UI의 기본 레이아웃은 아래와 같습니다.

<body ng-app="myFirstApp">

   <!-- Sidebars -->
   <div class="sidebar sidebar-left"><!-- ... --></div>
   <div class="sidebar sidebar-right"><!-- ... --></div>

   <div class="app">
   <div class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></div>
   <div class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></div>

      <!-- App body -->
         <div class='app-body'>
            <div class='app-content'>
               <ng-view></ng-view>
            </div>
         </div>
      </div><!-- ~ .app -->
   
   <!-- Modals and Overlays -->
   <div ui-yield-to="modals"></div>

</body>

3 단계

만들기 js/ folder in src/ 그리고 추가 app.js 그것에.

모듈을 정의하고 모바일 앵귤러 UI와 앵귤러 루트를 아래 그림과 같이 종속성으로 추가하십시오.

<script type="text/javascript">
   'ngRoute',
      angular.module('myFirstApp', [
      'mobile-angular-ui'
   ]);
</script>

<body> 태그에 ng-app =”myFirstApp”추가 −

<body ng-app="myFirstApp">

mobile-angular-ui 모듈에는 다음과 같은 모듈 목록이 있습니다.

angular.module('mobile-angular-ui', [
   'mobile-angular-ui.core.activeLinks',      /* adds .active class to current links */
   'mobile-angular-ui.core.fastclick',        /* polyfills overflow: auto */
   'mobile-angular-ui.core.sharedState',      /* SharedState service and directives */
   'mobile-angular-ui.core.outerClick',       /* outerClick directives */
   'mobile-angular-ui.components.modals',     /* modals and overlays */
   'mobile-angular-ui.components.switch',     /* switch form input */
   'mobile-angular-ui.components.sidebars',   /* sidebars */
   'mobile-angular-ui.components.scrollable', /* uiScrollable directives */
   'mobile-angular-ui.components.capture',    /* uiYieldTo and uiContentFor directives */
   'mobile-angular-ui.components.navbars'     /* navbars */
]);

mobile-angular-ui.min.js에는 위의 모든 핵심 및 구성 요소 모듈이 있습니다. 전체 mobile-angular-ui.min.js를로드하는 대신 요구 사항에 따라 필요한 구성 요소를로드 할 수도 있습니다.

4 단계

아래와 같이 body 태그에 컨트롤러를 추가합니다.

<body ng-app="myFirstApp" ng-controller="MainController">

5 단계

기본 레이아웃에 <ng-view></ng-view>, 그러면 뷰가로드됩니다.

ngRoute를 사용하여 app.js에서 경로를 정의하겠습니다. 라우팅에 필요한 파일은 이미 헤드 섹션에 추가되어 있습니다.

src /에 home / 폴더를 만듭니다. 다음 세부 사항과 함께 home.html을 추가하십시오.

<div class="list-group text-center">
   <div class="list-group-item list-group-item-home">
      <h1>{{msg}}</h1>
   </div>
</div>

이제 앱을 시작할 때 기본적으로 home.html이 <ng-view> </ ng-view> 안에 표시되기를 원합니다.

라우팅은 아래와 같이 app.config () 내부에서 구성됩니다.

app.config(function($routeProvider, $locationProvider) {
   $routeProvider
   .when("/", {
      templateUrl : "src/home/home.html"
   });
   $locationProvider.html5Mode({enabled:true, requireBase:false});
});

6 단계

아래와 같이 home.html 안에 {{msg}}를 추가했습니다.

<div class="list-group text-center">
   <div class="list-group-item list-group-item-home">
      <h1>{{msg}}</h1>
   </div>
</div>

아래와 같이 컨트롤러에서 동일하게 정의하겠습니다.

app.controller('MainController', function($rootScope, $scope, $routeParams) {
   $scope.msg="Welcome to Tutorialspoint!"
});

7 단계

이제 명령을 실행하여 아래 명령을 사용하여 앱을 시작하십시오.

node server.js

8 단계

다음 위치에서 앱로드 http://localhost:3000 브라우저에서-

모바일 모드에서 다음 화면이 표시됩니다.

데스크탑 모드에서 다음 화면이 표시됩니다.

다음 장에서 Mobile Angular UI의 각 구성 요소에 대한 세부 정보를 이해하겠습니다.

다음은 위 디스플레이의 최종 코드입니다. 지금까지 폴더 구조는 다음과 같습니다.

index.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Mobile Angular UI Demo</title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
      
      <meta name="apple-mobile-web-app-status-bar-style" content="yes" />
      <link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
      <link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
      <link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
      <link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
      <script src="node_modules/angular/angular.min.js"></script>
      <script src="node_modules/angular-route/angular-route.min.js"></script>
      <script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
      <script src="src/js/app.js"></script>
   </head>

   <body ng-app="myFirstApp" ng-controller="MainController">

      <!-- Sidebars -->
      <div class="sidebar sidebar-left"><!-- ... --></div>
      <div class="sidebar sidebar-right"><!-- ... --></div>

      <div class="app">
         <div class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></div>
         <div class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></div>

         <!-- App body -->
         
         <div class='app-body'>
            <div class='app-content'>
               <ng-view></ng-view>
            </div>
         </div>
      </div><!-- ~ .app -->
      
      <!-- Modals and Overlays -->
      <div ui-yield-to="modals"></div>
   </body>

</html>

js/app.js

/* eslint no-alert: 0 */

'use strict';
//
// Here is how to define your module
// has dependent on mobile-angular-ui
//
var app=angular.module('myFirstApp', [
   'ngRoute',
   'mobile-angular-ui'
]);
app.config(function($routeProvider, $locationProvider) {
   $routeProvider
   .when("/", {
      templateUrl : "src/home/home.html"
   });
   $locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.controller('MainController', function($rootScope, $scope, $routeParams) {
   $scope.msg="Welcome to Tutorialspoint!"
});

home/home.html

<div class="list-group text-center">
   <div class="list-group-item list-group-item-home">
      <h1>{{msg}}</h1>
   </div>
</div>
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved