이전 장에서는 이온 프레임 워크를 프로젝트로 가져 오는 방법을 배웠습니다.
다음으로, 이온 앱 응용 프로그램을 만드는 방법을 소개합니다.
Ionic Create 앱은 HTML, CSS 및 JavaScript를 사용하여 구축되므로 www 디렉토리를 만들고 디렉토리에서 index.html 파일을 만들 수 있습니다. 코드는 다음과 같습니다.
편집자 에서이 앱 생성을 신중하게 완료하려면 단계를 따라하십시오.
<! docType html> <html> <head> <meta charset = "utf-8"> <title> todo </title> <meta name = "viewport"content = "maximum-scale = 1, user-scalable = no, width = device-width"> in link href = "lib/its" Rel = "Stylesheet"> <script src = "lib/ionic/js/isionic.bundle.js"> </script> <!-Cordova/PhoneGap과 함께 생성 된 앱에 포함 된 파일은 Cordova/PhoneGap (개발 중 404)에 의해 제공됩니다 (404)-> <script src = "cordova.js"> </script> </head> <body> </body> </html>
위의 코드에서는 이온 성 CSS 파일, Ionic JS 파일 및 Ionic AngularJS Extension Ionic.bundle.js (Ionic.bundle.js)를 소개했습니다.
Ionic.bundle.js 파일에는 이미 이온 코어 JS, Angularjs 및 Ionic의 AngularJS 확장이 포함되어 있습니다. 다른 각도 모듈을 소개 해야하는 경우 LIB/JS/Angular Directory에서 호출 할 수 있습니다.
Cordova.js는 Cordova/PhoneGap을 사용하여 응용 프로그램을 작성할 때 생성됩니다. 수동 소개가 필요하지 않습니다. Cordova/PhoneGap 프로젝트에서 파일을 찾을 수 있으므로 개발 중에 404를 표시하는 것이 일반적입니다.
앱을 만듭니다
다음으로 제목, 사이드 바, 목록 등이 포함 된 응용 프로그램을 구현합니다. 디자인 다이어그램은 다음과 같습니다.
사이드 바를 만듭니다
사이드 바 생성은 Ion-Side-Menus 컨트롤러를 사용합니다.
이전에 만든 index.html 파일 편집하고 다음과 같이 <body>의 내용을 수정하십시오.
<body> <Ion-Side-Menus> <Ion-Side-Menu-Content> </ion-side-menu-content> <Ion-side-menu side = "left"> </ion-side-menu> </iion-side-menus> </body>
컨트롤러 분석 :
Ion-Side-Menus : 버튼을 클릭하거나 화면을 슬라이딩하여 확장 할 수있는 사이드 바 메뉴가있는 컨테이너입니다.
Ion-Side-Menu-Content : 기본 컨텐츠를 표시하는 컨테이너는 화면을 슬라이딩하여 메뉴를 확장 할 수 있습니다.
Ion-Side-Menu : 사이드 바를 저장하기위한 컨테이너.
앱을 초기화하십시오
다음으로 새 AngularJS 모듈을 생성하고 초기화합니다. 코드는 www/js/app.js에 있습니다.
Angular.Module ( 'TODO', [ 'IONIC'])))
그런 다음 NG-App 속성을 본체 태그에 추가하십시오.
<body ng-app = "todo">
index.html 파일에서 <script src = "cordova.js"> </script>에서 app.js 파일을 소개하십시오.
<script src = "js/app.js"> </script>
index.html 파일 바디 태그의 내용을 수정하십시오. 코드는 다음과 같습니다.
<body ng-app = "todo"> <iion-side-menus> <!-센터 내용-> <ion-side-menu-content> <ision-header-bar> <h1> todo </h1> </ison-header-bar> <imion-content> </ison-content> <!-왼쪽 메뉴-> ion-side-menu Side = "LEFT"> <ION-HEADER-BAR> <H1> 프로젝트 </h1> </ION-Header-Bar> </Ion-Side-Menu> </Ion-Side-Menu> </body>
위의 단계에서는 이온 기본 앱의 적용을 완료했습니다.
목록을 만듭니다
먼저 컨트롤러를 만듭니다. todoctrl :
<body ng-app = "todo"ng-controller = "todoctrl">
app.js 파일에서 컨트롤러를 사용하여 목록 데이터를 정의하십시오.
Angular.Module ( 'todo', [ 'Ionic']). 컨트롤러 ( 'todoctrl', function ($ scope) {$ scope.tasks = [{title : 'novice tutorial'}}, {제목 : 'www.runoob.com', {title : 'vovice tutorial'});index.html 페이지에서 Angular NG-Repeat를 사용하여 데이터를 반복합니다.
<!-센터 내용-> <ION-SIDE-MENU-CONTENT> <ION-HEADER-BAR> <H1> TODO </h1> </ision-Header-Bar> <Ion-Content> <!-목록-> <ION-LIST> <ION-ITEM NG-REPEAT = "TASKIN tasks "> {task.title}} </iion-item> </iion-list> </iion-content> </iion-menu-content>수정 후 index.html 바디 태그의 코드는 다음과 같습니다.
<body ng-app = "todo"ng-controller = "todoctrl"> <iOn-side-menus> <!-센터 내용-> <iOn-side-menu-bar> <h1> todo </h1> </ion-header-bar> <Ion-content> <!- 목록-<ition-list> ng-repeat = "task in tasks"> {{task.title}} </ision-item> </iion-list> </iion-content> <!-왼쪽 메뉴-> <iion-side-menu 측면 = "왼쪽"> <ION-HEADER-BAR> <H1> 프로젝트 </h1> </iOn-header-bar> </iion-side-menu> </is-side-menus> <script src = "http://www.runoob.com/static/ionic/js/app.js. </script> <script> src = "cordova.js"> </script> </body>추가 페이지를 만듭니다
index.html을 수정 한 후 </ion-side-menus> 다음에 다음 코드를 추가하십시오.
<script id = "new-task.html"type = "text/ng-template"> <div> <!-Modal Header Bar-> <Ion-Header-Bar> <h1> 새로운 작업 </h1> <버튼 ng-click = "closeenewtask ()" "> 취소 </button> </ision-header-bar> <!-modal content-> <emon-content>. ng-submit = "createTask (task)"> <div> <label> <입력 유형 = "text"자리 표시 자 = "어떻게해야합니까?" ng-model = "task.title"> </label> </div> <div> <버튼 유형 = "제출"> 작업 생성 </button> </div> </form> </ion-content> </div> </script>
위의 코드에서는 <script id = "new-task.html"type = "text/ng-template"를 통해 새 템플릿 페이지를 정의합니다.
CreateTask (작업) 기능은 양식이 제출 될 때 트리거됩니다.
ng-model =”task.title”은 양식의 입력 데이터를 작업 객체의 제목 속성에 할당합니다.
<iOn-side-menu-content>에서 내용을 수정하십시오. 코드는 다음과 같습니다.
<!-센터 내용-> <ION-SIDE-MENU-CONTENT> <ION-HEADER-BAR> <H1> TODO </h1> <!-버튼 추가-> <버튼 ng-click = "newtask ()"> <i> </i> </button> </iOn-header-bar> <Ion-Content> <!-<ition-list> 작업 "> {{task.title}} </iion-item> </ision-list> </ision-content> </is-side-menu-content> app.js 파일, 컨트롤러 코드는 다음과 같습니다. Angular.module ( 'todo', [ 'itionic']). controller ( 'todoctrl', $ therdoctl '). {$ scope.tasks = [{title : 'vovice tutorial'}, {title : 'www.runoob.com'}, {title : 'novice tutorial'}, {title : 'www.runoob.com'}]; // 모델을 만들고로드하여 $ itionicmodal.fromtemplateUrl ( 'new-task.htm.htmal). {$ scope.taskModal = modal;}, {scope : $ scope, animation : 'slide-in-up'}); // 전화 $ scope.createTask = function (task) {$ scope.tasks.push ({title : taking.title}); $ scope.taskmodal.hide (); // model.title =. $ scope.newtask = function () {$ scope.taskmodal.show ();}; // 새로 추가 된 모델 $ scope.closeewtask = function () {$ scope.taskModal.hide ();});사이드 바를 만듭니다
위의 단계를 통해 새로운 기능을 구현했으며 이제 앱에 사이드 바 기능을 추가합니다.
<iOn-side-menu-content>에서 내용을 수정하십시오. 코드는 다음과 같습니다.
<!-중앙 내용-> <iOn-side-menu-content> <iOn-header-bar> <button ng-click = "toggleProjects ()"> <i> </i> </button> <h1> {activeProject.title}}}} </h1> <!-버튼 <버튼 추가 ng-click = "newtask ()"> <i> </i> </button> </iion-header-bar> <Ion-content scroll = "false"> <iOn-list> <iion-item ng-repeat = "task in ActiveProject.tasks "> {avect.title}} ng-click = "newProject ()"> </button> </iOn-Header-Bar> <Ion-Content Scroll = "False"> <Ion-list> <iOn-item ng-Repeat = "프로젝트의 프로젝트"ng-click = "selectProject (project, $ index)"ng class = " project} "> {{project.title}} </ion-item> </ision-list> </is on-content> </is-side-menu><ION-ITEM>의 NG 클래스 지침은 메뉴 활성화 스타일을 설정합니다.
여기서 우리는 새로운 JS 파일 app2.js (이전과 혼동하지 않도록)를 만듭니다. 코드는 다음과 같습니다.
Angular.Module ( 'TODO', [ 'IONIC'])/*** 프로젝트 공장은 현지 스토리지에서 프로젝트 저장 및로드*를 처리하고* 마지막 활성 프로젝트 지수를 저장하고로드 할 수있게 해줍니다.*/. Factory ( 'Projects', function () {all : var : var projectString = Window.localStorage [ 'ProjectString]; Angular.fromjson (projectString);} return [];}, save : save : function (projects) {wind parseint (Window.localStorage [ 'lastActiveProject']) || 0;}, setLastActiveIndex : function (index) {wind {// 주어진 projectTitlevar createProject = function (projectTitle) {var newProject = projects.newProject (projectTitle); $ scope.projects.push (newProject); projects.save ($ scope.projects); $ scope.slectproject (newProject) $ scope.projects.length-1);} // 프로젝트로드 또는 초기화 $ scope.projects = projects.all (); // 마지막 활성화 또는 첫 번째 Project $ scope.activeProject = $ scope.projects [projects.getLastActiveIndex ()]; // 새로운 프로젝트를 생성하기 위해 호출됩니다. 이름 '); if (projectTitle) {createProject (projectTitle);}}; // 주어진 Project Scope.SelectProject = function (project, index) {$ scope.ActiveProject = project; projects.setLastActiveIndEx ($ irionicsIdeMenudeLegate.TogGlElegt.TogGleleft) modal $ ionicmodal.fromtemplateUrl ( 'new-task.html', function (modal) {$ scope.taskmodal = modal;}, {scope : $ scope}); $ scope.createtask = function (task) {if (! $ scope.activeproject || task) {return;} $ scope.activeProject.tasks.push ({title : task.title}); $ scope.taskmodal.hide (); // 비효율적이지만 모든 projectProjects.save ($ scope.projects); task.title = "";}; $ scope.newtask = function ()을 저장합니다. {$ scope.taskModal.show ();}; $ scope.closeewtask = function () {$ scope.taskModal.hide ();} $ scope.toggleProjects = function () {$ itionicsideMenudelegate.toggleleft ();};};}; 초기화 된 // 적절하게 $ timeout (function () {if ($ scope.projects.length == 0) {while (true) {var projectTitle = prompt ( '첫 번째 프로젝트 제목 :'); if (projectTitle); break;}}}}); 본문의 Ion-Side-Menus 코드는 다음과 같습니다. -> <button ng-click = "newTask ()"> </i> </i> </button> </iOn-header-bar> <Ion-Content Scroll = "false"> <Ion-list> <iOn-item ng-Repeat = "task in ActiveProject.tasks "> {{task.title}}} </ion-item> </ision-list> </ision-content> <!-왼쪽 열-> <iOn-side-menu side ="left "> <header-bar> <h1> projects </h1> 버튼 ng-click = "newProject ()"> </button> </iOn-Header-Bar> <Ion-Content Scroll = "False"> <Ion-list> <iOn-item ng-Repeat = "프로젝트의 프로젝트"ng-click = "selectProject (project, $ index)"ng class = " project} "> {{project.title}} </ion-item> </ision-list> </iion-content> </ion-side-menu> </is-side-menus>위의 내용은 Ionic이 편집자가 귀하에게 소개 한 앱 프로젝트를 만드는 방법의 전체 코드입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!