কৌণিক জেএস গতিশীল রাউটিং

Question 1

রাউটিংটি অন্তর্নিহিত সহ আমার বর্তমানে একটি কৌণিক জেএস অ্যাপ্লিকেশন রয়েছে It এটি কাজ করে এবং সবকিছু ঠিক আছে।

আমার app.js ফাইলটি দেখতে এমন দেখাচ্ছে:

angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives']).
  config(['$routeProvider', function ($routeProvider) {
      $routeProvider.when('/', { templateUrl: '/pages/home.html', controller: HomeController });
      $routeProvider.when('/about', { templateUrl: '/pages/about.html', controller: AboutController });
      $routeProvider.when('/privacy', { templateUrl: '/pages/privacy.html', controller: AboutController });
      $routeProvider.when('/terms', { templateUrl: '/pages/terms.html', controller: AboutController });
      $routeProvider.otherwise({ redirectTo: '/' });
  }]);

আমার অ্যাপ্লিকেশনটিতে একটি সিএমএস রয়েছে যেখানে আপনি / পৃষ্ঠাগুলির ডিরেক্টরিতে নতুন এইচটিএমএল ফাইল অনুলিপি করতে এবং যুক্ত করতে পারবেন ।

আমি এখনও নতুন গতিযুক্ত যুক্ত ফাইলগুলির জন্য রাউটিং সরবরাহকারীর মাধ্যমে যেতে চাই।

একটি আদর্শ বিশ্বে রাউটিং প্যাটার্নটি হ'ল:

$ রুটপ্রভাইডার.ওহেন ('/ পৃষ্ঠার নাম ', {টেমপ্লেট ইউআরএল : '/ পৃষ্ঠাগুলি / পৃষ্ঠার নাম। html ', নিয়ামক: সিএমএসকন্ট্রোলার});

সুতরাং যদি আমার নতুন পৃষ্ঠার নামটি "কন্টাক্ট.এইচটিএমএল" হত তবে আমি কৌনিকটি "/ পরিচিতি" বাছাই করতে চাই এবং "/pages/contact.html" এ পুনঃনির্দেশ করব।

এটা কি সম্ভব ?! এবং যদি তাই হয় কিভাবে ?!

হালনাগাদ

আমার এখন এটি আমার রাউটিং কনফিগারেশনে রয়েছে:

$routeProvider.when('/page/:name', { templateUrl: '/pages/home.html', controller: CMSController })

এবং আমার সিএমএস নিয়ন্ত্রণকারীতে:

function CMSController($scope, $route, $routeParams) {
    $route.current.templateUrl = '/pages/' + $routeParams.name + ".html";
    alert($route.current.templateUrl);
}
CMSController.$inject = ['$scope', '$route', '$routeParams'];

এটি বর্তমান টেম্পলেটটি ইউরালকে সঠিক মান হিসাবে সেট করে।

তবে আমি এখন নতুন টেমপ্লেট ইউআরএল মান দিয়ে এনজি-ভিউ পরিবর্তন করতে চাই । এটি কীভাবে সম্পন্ন হয়?

Question 2

angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives']).
        config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/page/:name*', {
            templateUrl: function(urlattr){
                return '/pages/' + urlattr.name + '.html';
            },
            controller: 'CMSController'
        });
    }
]);

* যুক্ত করা আপনাকে কাজ করতে দেয় একাধিক স্তরের ডিরেক্টরিগুলির সাথে গতিশীলভাবে কাজ করতে দেয়। উদাহরণ: / পৃষ্ঠা / গাড়ি / বিক্রয় / তালিকা এই সরবরাহকারীর উপর ধরা পড়বে

দস্তাবেজগুলি থেকে (1.3.0):

"যদি টেম্পলেট ইউআরএল একটি ফাংশন হয় তবে এটি নীচের পরামিতিগুলির সাথে কল করা হবে:

{অ্যারের

এছাড়াও

কখন (পথ, পথ): পদ্ধতি

পাথটিতে নামযুক্ত গোষ্ঠীগুলি একটি কোলন দিয়ে শুরু হয়ে তারার সাথে শেষ হতে পারে: উদাহরণস্বরূপ: নাম *। সমস্ত অক্ষর আগ্রহের সাথে name রুটপ্যারামগুলিতে প্রদত্ত নামের অধীনে সংরক্ষণ করা হয় যখন রুটটি মেলে।

Question 3

ঠিক আছে সমাধান।

গিটহাবটিতে সমাধান যুক্ত করা হয়েছে - http://gregorypratt.github.com/AngularDynamicRouting

আমার app.js রাউটিং কনফিগারেশনে:

$routeProvider.when('/pages/:name', {
    templateUrl: '/pages/home.html', 
    controller: CMSController 
});

তারপরে আমার সিএমএস নিয়ামকটিতে:

function CMSController($scope, $route, $routeParams) {

    $route.current.templateUrl = '/pages/' + $routeParams.name + ".html";

    $.get($route.current.templateUrl, function (data) {
        $scope.$apply(function () {
            $('#views').html($compile(data)($scope));
        });
    });
    ...
}
CMSController.$inject = ['$scope', '$route', '$routeParams'];

# দর্শন আমার সাথে <div id="views" ng-view></div>

সুতরাং এখন এটি স্ট্যান্ডার্ড রাউটিং এবং গতিশীল রাউটিংয়ের সাথে কাজ করে।

এটি পরীক্ষা করার জন্য আমি কপিরাইট করা সম্পর্কে সম্পর্কে। Html এটিকে পোর্টফোলিও। Html বলেছি, এর কিছু বিষয়বস্তু পরিবর্তন /#/pages/portfolioকরেছি এবং আমার ব্রাউজারে প্রবেশ করেছি এবং আরে প্রিস্টো পোর্টফোলিও html প্রদর্শিত হয়েছিল ....

আপডেট করা হয়েছে t প্রয়োগ এবং $ এইচটিএমএলকে সংকলন করুন যাতে ডায়নামিক সামগ্রী অন্তর্ভুক্ত করা যায় ected

Question 4

আমি মনে করি এ জাতীয় কাজ করার সবচেয়ে সহজ উপায়টি পরে রুটগুলি সমাধান করা আপনি উদাহরণস্বরূপ জেসসনের মাধ্যমে রুটগুলি জানতে চাইতে পারেন। আমি কনফিগার পর্বের সময়, $ সরবরাহের মাধ্যমে $ রুটপ্রভাইডারের বাইরে একটি কারখানা তৈরি করেছি কিনা তা পরীক্ষা করে দেখুন, তাই আমি রান পর্বে $ রুটপ্রাইডার অবজেক্টটি এমনকি কন্ট্রোলারগুলিতেও রাখতে পারি।

'use strict';

angular.module('myapp', []).config(function($provide, $routeProvider) {
    $provide.factory('$routeProvider', function () {
        return $routeProvider;
    });
}).run(function($routeProvider, $http) {
    $routeProvider.when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
    }).otherwise({
        redirectTo: '/'
    });

    $http.get('/dynamic-routes.json').success(function(data) {
        $routeProvider.when('/', {
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        });
        // you might need to call $route.reload() if the route changed
        $route.reload();
    });
});

Question 5

$ রুটপ্রভাইডার ইউআরআই প্যাটারগুলিতে আপনি ভেরিয়েবল প্যারামিটারগুলি নির্দিষ্ট করতে পারেন: যেমন: $routeProvider.when('/page/:pageNumber' ...এবং এটি আপনার নিয়ামকটিতে $ রুটপ্যারামের মাধ্যমে অ্যাক্সেস করতে পারেন।

$ রুট পৃষ্ঠার শেষে একটি ভাল উদাহরণ রয়েছে: http://docs.angularjs.org/api/ng.$route

সম্পাদনা (সম্পাদিত প্রশ্নের জন্য):

দুর্ভাগ্যক্রমে রাউটিং সিস্টেমটি অত্যন্ত সীমাবদ্ধ - এই বিষয়টি নিয়ে প্রচুর আলোচনা রয়েছে, এবং কয়েকটি সমাধান প্রস্তাব করা হয়েছে, একাধিক নামকরণ মতামত ইত্যাদি তৈরির মাধ্যমে etc তবে এখনই, এনজিভিউ নির্দেশিকা প্রতি রুটে কেবলমাত্র একটি দর্শন দেয় ves এক থেকে এক ভিত্তিতে। আপনি একাধিক উপায়ে এটি সম্পর্কে যেতে পারেন - সবচেয়ে সহজ হ'ল ভিউর টেমপ্লেটটি লোডার হিসাবে ব্যবহার করে, এ<ng-include src="myTemplateUrl"></ng-include> ভিউর মধ্যে ট্যাগ হবে ($ স্কোপ.মিটাইপলেট ইউআরএল নিয়ামকটিতে তৈরি করা হবে)।

আমি আরও জটিল (তবে ক্লিনার, বৃহত্তর এবং আরও জটিল সমস্যার জন্য) সমাধানটি ব্যবহার করি, মূলত the রুট পরিষেবাটি পুরোপুরি এড়িয়ে যাওয়া, যা এখানে বিস্তারিত:

http://www.bennadel.com/blog/2420- ম্যাপিং -আঙ্গুলার জেএস- রুটস- ওন্টো-ইউআরএল- প্যারামিটারস- এবং ক্লায়েন্ট- সাইড- এভেন্টস htm

Question 6

নিশ্চিত না কেন এটি কাজ করে তবে গতিশীল (বা ওয়াইল্ডকার্ড যদি আপনি পছন্দ করেন) রুটগুলি কৌণিক 1.2.0-rc.2 এ সম্ভব হয় ...

http://code.angularjs.org/1.2.0-rc.2/angular.min.js
http://code.angularjs.org/1.2.0-rc.2/angular-route.min.js

angular.module('yadda', [
  'ngRoute'
]).

config(function ($routeProvider, $locationProvider) {
  $routeProvider.
    when('/:a', {
  template: '<div ng-include="templateUrl">Loading...</div>',
  controller: 'DynamicController'
}).


controller('DynamicController', function ($scope, $routeParams) {
console.log($routeParams);
$scope.templateUrl = 'partials/' + $routeParams.a;
}).

উদাহরণ.com/foo -> "foo" আংশিক লোড করে

উদাহরণ.com / বার-> "বার" আংশিক লোড করে

এনজি-ভিউতে কোনও সামঞ্জস্যের প্রয়োজন নেই। '/: A' কেসটি কেবলমাত্র ভেরিয়েবলের মধ্যে আমি খুঁজে পেয়েছি যা এটিকে ঘটাবে .. '/: foo' কাজ করে না যতক্ষণ না আপনার পার্টিশালগুলি সমস্ত foo1, foo2, ইত্যাদি হয় ... '/: a' কোনও আংশিক সাথে কাজ করে না নাম

সমস্ত মান গতিশীল নিয়ামককে আগুন দিয়ে দেয় - সুতরাং কোনও "অন্যথায়" নেই তবে, আমি মনে করি আপনি গতিশীল বা ওয়াইল্ডকার্ড রাউটিং দৃশ্যে যা খুঁজছেন তা হ'ল ..

Question 7

AngularJS 1.1.3 হিসাবে, আপনি এখন নতুন ক্যাচ-অল প্যারামিটারটি ব্যবহার করে যা করতে চান ঠিক তেমন করতে পারেন।

https://github.com/angular/angular.js/commit/7eafbb98c64c0dc079d7d3ec589f1270b7f6fea5

প্রতিশ্রুতি থেকে:

এটি রুটপ্রভাইডারকে প্যারামিটারগুলি মেনে নিতে অনুমতি দেয় যা সাবস্ট্রিংয়ের সাথে মেলে এমনকি যদি তাদের কোনও কোলনের পরিবর্তে একটি নক্ষত্রের সাথে উপসর্গ করা থাকে তবে স্ল্যাশ থাকে। উদাহরণস্বরূপ, এর মতো রুটের edit/color/:color/largecode/*largecode সাথে এই জাতীয় কিছু মিলবে http://appdomain.com/edit/color/brown/largecode/code/with/slashs।

আমি নিজে এটি পরীক্ষা করেছি (1.1.5 ব্যবহার করে) এবং এটি দুর্দান্ত কাজ করে। কেবল মনে রাখবেন যে প্রতিটি নতুন ইউআরএল আপনার নিয়ামকটিকে পুনরায় লোড করবে, সুতরাং যে কোনও ধরণের অবস্থা রাখতে, আপনাকে একটি কাস্টম পরিষেবা ব্যবহার করতে হতে পারে।

Question 8

এখানে আরও একটি সমাধান যা ভাল কাজ করে।

(function() {
    'use strict';

    angular.module('cms').config(route);
    route.$inject = ['$routeProvider'];

    function route($routeProvider) {

        $routeProvider
            .when('/:section', {
                templateUrl: buildPath
            })
            .when('/:section/:page', {
                templateUrl: buildPath
            })
            .when('/:section/:page/:task', {
                templateUrl: buildPath
            });



    }

    function buildPath(path) {

        var layout = 'layout';

        angular.forEach(path, function(value) {

            value = value.charAt(0).toUpperCase() + value.substring(1);
            layout += value;

        });

        layout += '.tpl';

        return 'client/app/layouts/' + layout;

    }

})();