Jump to content
zetoino

angularjs e ngRoute

Recommended Posts

zetoino

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 :

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 ....

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

Edited by apocsantos
geshi

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.