मोबाइल कोणीय यूआई - मेरा पहला ऐप
इस अध्याय में, हम अपना पहला ऐप बनाएंगे जो मोबाइल के साथ-साथ डेस्कटॉप पर भी चलेगा।
पिछले अध्याय में हमने जो प्रोजेक्ट सेटअप बनाया है, उसकी संरचना निम्नलिखित है -
uiformobile/
node_modules/
src/
package.json
index.htmlमोबाइल कोणीय UI का उपयोग करके सरल UI बनाने के लिए चरणों का पालन करें।
चरण 1
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
हम मोबाइल कोणीय यूआई के मूल लेआउट को नीचे के रूप में देखेंगे -
<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 यह करने के लिए।
मॉड्यूल को परिभाषित करें और नीचे दिखाए अनुसार निर्भरता के रूप में मोबाइल कोणीय यूआई और कोणीय मार्ग जोड़ें -
<script type="text/javascript">
'ngRoute',
angular.module('myFirstApp', [
'mobile-angular-ui'
]);
</script>एनजी-ऐप = "myFirstApp" को <body> टैग में जोड़ें -
<body ng-app="myFirstApp">मोबाइल-कोणीय-यूआई मॉड्यूल की निम्नलिखित सूची है -
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 */
]);मोबाइल-कोणीय- ui.min.js, इसमें उपरोक्त सभी कोर और घटक मॉड्यूल हैं। आप पूरे मोबाइल-कोणीय-ui.min.js को लोड करने के बजाय अपनी आवश्यकता के अनुसार आवश्यक घटकों को भी लोड कर सकते हैं।
चरण 4
अपने बॉडी टैग में कंट्रोलर जोड़ें जैसा कि नीचे दिखाया गया है -
<body ng-app="myFirstApp" ng-controller="MainController">चरण 5
मूल लेआउट में, हमने जोड़ा है <ng-view></ng-view>, जो हमारे लिए विचारों को लोड करेगा।
आइए ngRoute का उपयोग करके एप्लिकेशन को मार्गों में परिभाषित करें। रूटिंग के लिए आवश्यक फाइलें पहले ही हेड सेक्शन में जुड़ जाती हैं।
एक फ़ोल्डर घर बनाएँ / 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
हमने नीचे दिखाए अनुसार 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 ब्राउज़र में -
आपको निम्न स्क्रीन मोबाइल मोड में दिखाई देगी -
आपको डेस्कटॉप मोड में निम्न स्क्रीन दिखाई देगी -
आइए अगले अध्याय में मोबाइल कोणीय यूआई में प्रत्येक घटक के विवरण को समझें।
यहाँ उपरोक्त प्रदर्शन के लिए अंतिम कोड है। अब तक की फ़ोल्डर संरचना इस प्रकार है -
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>