Quantcast
Channel: Tópicos
Viewing all articles
Browse latest Browse all 14700

angularjs e ngRoute

$
0
0
Boas pessoal sou novo por aqui e estou a começar a explorar angularJS ...

estou a tentar usar ngRoute para os links das paginas mas não estou a conseguir tenho o ficheiro de js desta forma :

Código (Javascript):
var myApp = angular.module('webApp', ['ui.bootstrap']);
myApp.controller('AccordionDemoCtrl', function ($scope) {
$scope.oneAtATime = true;

$scope.groups = [
{
title: 'Dynamic Group Header - 1',
content: 'Dynamic Group Body - 1'
},
{
title: 'Dynamic Group Header - 2',
content: 'Dynamic Group Body - 2'
}
];

$scope.items = ['Item 1', 'Item 2', 'Item 3'];

$scope.addItem = function() {
var newItemNo = $scope.items.length + 1;
$scope.items.push('Item ' + newItemNo);
};

$scope.status = {
isFirstOpen: true,
isFirstDisabled: false
};
});

Ora isto é um menu que esta a funcionar....

depois andei a pesquisar e encontrei um exemplo para fazer o sistema de links entre paginas só que não sei como juntar isto sempre que junto o código deixa tudo de funcionar ....

Código (Javascript):
angular.module('webApp', ['ngRoute']).
config(function ($routeProvider) {
$routeProvider.
when('/about', {templateUrl: 'partials/about.html', controller: 'AboutCtrl'}).
when('/experiments', {templateUrl: 'partials/experiments.html', controller: 'ExperimentsCtrl'}).
when('/home', {templateUrl: 'partials/home.html', controller: 'HomeCtrl'}).
otherwise({redirectTo: '/home'});
})
.controller('AboutCtrl', function ($scope, StateService) {
alert("teste");
$scope.title = 'About Page';
$scope.body = 'This is the about page body';

$scope.message = StateService.getMessage();

$scope.updateMessage = function (m) {
StateService.setMessage(m);
};
})
.controller('ExperimentsCtrl', function ($scope, StateService, ExperimentsService) {
$scope.title = 'Experiments Page';
$scope.body = 'This is the about experiments body';

$scope.message = StateService.getMessage();
$scope.experiments = ExperimentsService.getExperiments();

$scope.updateMessage = function (m) {
StateService.setMessage(m);
};
})
.controller('HomeCtrl', function ($scope, StateService) {
$scope.title = 'Home Page';
$scope.body = 'This is the about home body';

$scope.message = StateService.getMessage();

$scope.updateMessage = function (m) {
StateService.setMessage(m);
};
})
.factory('StateService', function () {
var message = 'Hello Message';
var getMessage = function () {
return message;
};
var setMessage = function (m) {
message = m;
};

return {
getMessage: getMessage,
setMessage: setMessage
}
})
.service('ExperimentsService', function () {
var service = this,
experiments = [
{name: 'Experiment 1', description: 'This is an experiment', completed:0},
{name: 'Experiment 2', description: 'This is an experiment', completed:0},
{name: 'Experiment 3', description: 'This is an experiment', completed:0},
{name: 'Experiment 4', description: 'This is an experiment', completed:0}
];

service.getExperiments = function() {
return experiments;
};
})
.directive('experiment', function(){
var linker = function (scope, element, attrs) {
element.on('click', function(){
scope.doExperiment();
})
};

var controller = function($scope){
$scope.doExperiment = function() {
$scope.$apply(function(){
$scope.experiment.completed++;
});
};
};

return {
scope: true,
restrict: 'E',
template: '<div class="experiment">' +
'<h3>{{experiment.name}}</h3>' +
'<p>{{experiment.description}}</p>' +
'<p><strong>{{experiment.completed}}</strong></p>' +
'</div>',
link: linker,
controller: controller
}
});
 

Alguém pode ajudar a colocar isto junto a que funcione ?

Se estiver a perguntar alguma barbaridade não me levem a mal estou  mesmo a começar nisto.
Desde já obrigado

Viewing all articles
Browse latest Browse all 14700