在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):asBrettisay/gulp-es6-demo开源软件地址(OpenSource Url):https://github.com/asBrettisay/gulp-es6-demo开源编程语言(OpenSource Language):HTML 44.1%开源软件介绍(OpenSource Introduction):DevMtn-TravelsObjectiveCreate an Angular application that uses routes to navigate through a travel site. You will be able to use routes and sub routes by the end of this project. In this repo, you'll continue to practice fundamental Angular principles you've learned like controller and services. Application DesignThis is located in the images folder in this project. SetupFor this project you're going to need to serve your files through a live-server
Note If your text editor supports its own live-server package, install the package and run live-server directly from your editor. Review the Existing Repo CodeTake a look at the file structure and files that have been provided to you for this project. A few things have been included for you
Take a look at how the routes are broken into folders. This is a very easy way to keep things modular!
Take a look at the index.html page.
The <ui-view></ui-view> element and it's placement is crucial to understanding how routing works.
The router is going to take that element and inject certain templates (html pages) into it depending on which route we're using.
The template that is injected into the <ui-view></ui-view> element depends entirely on what we specify in using the Once you feel VERY comfortable with the existing codebase, move on to the next step. Configure the RouterIn this step, we need to set up five more state views in our app.js. Go ahead and add the following state views.
By setting up the router, we are telling our app which options it has in terms of which views we can see based on url, and what contents are related to those views such as our html templates or controllers. When you are done, your code should look something like this. Make sure you create controllers for the packages, booked and locations. Be sure to organize them in a controllers folder and link them in a script tag at the bottom of your html file. And then add the controllers to your state object. The contact.html and the about-adventurers.html are both sub routes to the home page. $stateProvider
.state('home',{
url:'/',
templateUrl: "../views/about.html"
})
.state('adventurers',{
url:,
parent:,
templateUrl:
})
.state('contact',{
url:'',
parent:'',
templateUrl: ""
})
.state('packages',{
url:'',
templateUrl: "",
controller: '',
controllerAs: ''
})
.state('booked',{
url:'',
templateUrl: "",
controller: '',
controllerAs: ''
})
.state('locations',{
url:'',
templateUrl: "",
controller: '',
controllerAs: ''
}); $stateProvider
.state('home',{
url:'/',
templateUrl: "../views/about.html"
})
.state('adventurers',{
url:'/adventurers',
parent:'home',
templateUrl: "../views/about-adventurers.html"
})
.state('contact',{
url:'/contact',
parent:'home',
templateUrl: "../views/contact.html"
})
.state('packages',{
url:'/packages',
templateUrl: "../views/packages.html"
})
.state('booked',{
url:'/booked/:id',
templateUrl: "../views/booked.html"
})
.state('locations',{
url:'/locations',
templateUrl: "../views/locations.html"
}); Setup the templatesNow that our templates and controllers have been injected into each of the states, we need to add some markup to the templates to get them to work. The templates we need to make changes to are the booked.html,locations.html and the packages.html. Open up those files and you will see comments guiding you through the steps Go ahead to your browser and test your content. Now that we have created templates that are linked to the state config, we should be able to see them appear when the url has an appropriate extension. For example use the following url extension to test the packages page : http://localhost:8080/#/packages. If everything works correctly, go through the index.html file and the template files, and add any ui-sref attributes that would be necessary to connect to the different views. Controller SetupNext, go ahead and create a controller for the packages,booked and locations views Create three new files, which are listed below, and place them in the controllers folder.
Make sure that $scope and mainSrv are injected into each of the controllers. And before we get started, let's make sure that the controllers have been added to your index.html in a script source tag. Add controller to state objectAdd controller to state objectNow that we have created our controllers and added the script tags to the index.html we need to tell the router what controller it needs to use On the packages,booked and location states add a controller property with the value as whatever you named the associated controller. Now when you navigate to a view the router will know what controller it needs to be using $stateProvider
.state('home',{
url:'/',
templateUrl: "../views/about.html"
})
.state('adventurers',{
url:'/adventurers',
parent:'home',
templateUrl: "../views/about-adventurers.html"
})
.state('contact',{
url:'/contact',
parent:'home',
templateUrl: "../views/contact.html"
})
.state('packages',{
url:'/packages',
templateUrl: "../views/packages.html",
controller: 'packagesCtrl',
controllerAs: 'vm'
})
.state('booked',{
url:'/booked/:id',
templateUrl: "../views/booked.html",
controller: 'bookedCtrl',
controllerAs: 'vm'
})
.state('locations',{
url:'/locations',
templateUrl: "../views/locations.html",
controller: 'lacationsCtrl',
controllerAs: 'vm'
}); Test ControllersCreate a test variable in your controller called $scope.test and give it some value. In the associated template file that you created in the last step, put {{test}} somewhere in the file. Make sure that the value that you gave to $scope.test pops up on the view. Getting Data from serviceNow that we have tested the controllers and know they work we can get the data we need from the service We want to gain access to the travelInfo data that is present in our mainSrv by calling to the service through our controller. Go ahead and delete the test variables you made and create new $scope variables that are accessible in the html view and associate them with the data that was pulled from the service files. If you followed the steps located in the views then you should see the data from the service on the page. If you dont see anything make sure your getting the data in your controller from the service.
Finish the booked.html viewLet's start by injecting $state into the bookedCtrl, if you console.log($state) you will see that we get a ton of info about our application state. What we need is the $state.params, this will give us the id being passed though the url params Now that we have the $state.params "id" we can loop over the data we are getting from our service and check if we have a object that has the same id as the $state.params, if we find a object that has that id then set that object on a $scope variable and then attach that variable to the booked view using {{}} Resources
ContributionsIf you see a problem or a typo, please fork, make the necessary changes, and create a pull request so we can review your changes and merge them into the master repo and branch. Copyright© DevMountain LLC, 2016. Unauthorized use and/or duplication of this material without express and written permission from DevMountain, LLC is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to DevMountain with appropriate and specific direction to the original content. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论