I made a similar question but... this is a little different and I got stucked this :S So here what I am facing right now:
So I've got a project where in I using Angular.js. This is a default test-case portfolio site. @index i've got an ng-view directive whichc should include 3 things, and 2 menuitems I can choose.
- by default it loads a list of items from the factory, this imade by itemView
- itemview, which contains the selected items detailed infos, but right now just the title
- a menuitem, which you can choose, redirect to resumeView, where there is only some paragraph text, so nothing dynamic
The problem is I maybe messed something with the routing... checked it over dozen times but cannot found the problem :s So some help is needed here :(
relevant parts of the index.html:
<!DOCTYPE html>
<html ng-app="portApp">
<head>
<meta charset="utf-8">
<base href="/">
</head>
<body ng-controller="mainController as ports">
<nav class="navbar navbar-default" role="navigation">
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav nav-list">
<li class="active"><a href="/">Referenciák</a>
</li>
<li class=""><a href="/resume">Életrajz</a>
</li>
</ul>
</div>
</nav>
<div id="main_container" class="container" ng-view></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/vendor/angular.min.js"></script>
<script type="text/javascript" src="js/vendor/angular.route.min.js"></script>
<script type="text/javascript" src="js/portApp.js"></script>
</body>
</html>
Content of the portApp.js:
(function(){
var portApp = angular.module("portApp", []);
portApp.config(function($routeProvider, $locationProvide) {
$routeProvider
.when("/", {
templateUrl: "views/listView.html",
controller: "mainController"
})
.when("/resume", {
templateUrl: "views/resumeView.html"
})
.when("/works/:workId", {
templateUrl: "views/itemView.html",
controller: "itemController"
})
.otherwise({
redirectTo: "/"
});
$locationProvider.html5Mode(true);
});
portApp.controller("mainController", function($scope, workFactory) {
$scope.product = workFactory.work;
});
portApp.controller("itemController", function($scope, workFactory) {
$scope.work = workFactory.work;
$scope.product = scope.work[$routeParams.Link];
});
portApp.factory("workFactory", function() {
var scope = this;
scope.work = [
{
Title: "Coca Cola",
subTitle: "",
Link: "coca",
Thumbnail: "img/portfolio02.png",
Image: "img/egismont.png"
},
{
Title: "Pepsi",
subTitle: "Kristályvíz",
Link: "pepsi",
Thumbnail: "img/portfolio13.png",
Image: "img/pepsimont.png"
}
];
return scope;
}
})();
Relevant content of the listView.html:
<li ng-repeat="workItem in ports.products" class="col-md-3 col-sm-6 col-xs-6">
<a href="/works/{{ $workItem.Link}}" title="{{ workItem.Title }}">
<img ng-src="{{ workItem.Thumbnail }}" class="img-responsive img-thumbnail" />
</a>
</li>
The itemView contains only the {{ workItem.Title }}, and the resumeView contains some text only. What could I miss?
Aucun commentaire:
Enregistrer un commentaire