Mobile Angular UI - แอปแรกของฉัน
ในบทนี้เราจะสร้างแอพแรกของเราที่จะทำงานบนมือถือและบนเดสก์ท็อป
การตั้งค่าโครงการที่เราสร้างในบทก่อนหน้ามีโครงสร้างดังนี้ -
uiformobile/
node_modules/
src/
package.json
index.htmlทำตามขั้นตอนเพื่อสร้าง UI อย่างง่ายโดยใช้ Mobile Angular UI
ขั้นตอนที่ 1
เพิ่มไฟล์ css ต่อไปนี้ในส่วนหัว html ดังที่แสดงด้านล่าง -
<!-- 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 ไปเลย
กำหนดโมดูลและเพิ่ม Mobile angular UI และ Angular Route เป็นการพึ่งพาดังที่แสดงด้านล่าง -
<script type="text/javascript">
'ngRoute',
angular.module('myFirstApp', [
'mobile-angular-ui'
]);
</script>เพิ่ม ng-app =” myFirstApp” ในแท็ก <body> -
<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 ng-app="myFirstApp" ng-controller="MainController">ขั้นตอนที่ 5
ในรูปแบบพื้นฐานเราได้เพิ่ม <ng-view></ng-view>ซึ่งจะโหลดมุมมองให้เรา
ให้เรากำหนดเส้นทางใน app.js โดยใช้ ngRoute ไฟล์ที่จำเป็นสำหรับการกำหนดเส้นทางถูกเพิ่มไว้แล้วในส่วน head
สร้างโฟลเดอร์ home / ใน src / เพิ่ม 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
เราได้เพิ่ม {{msg}} ไว้ใน home.html ดังที่แสดงด้านล่าง -
<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>